From 18d79460a7e140b54ba2d34871c896602b39569c Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 21 Sep 2023 10:03:26 -0700 Subject: [PATCH] [optional] Misc combobox cleanups - [perf] remove truncation component completely if truncation isn't customized; fall back to CSS overflow instead - fix buggy behavior where truncation would suddenly change if search value only consists of spaces (by trimming condition early) --- .../__snapshots__/combo_box.test.tsx.snap | 187 ++---------------- src/components/combo_box/combo_box.spec.tsx | 10 +- src/components/combo_box/combo_box.test.tsx | 21 +- .../combo_box_options_list.tsx | 24 ++- 4 files changed, 43 insertions(+), 199 deletions(-) diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap index 33c33467ee4..1437ce0adf0 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -571,22 +571,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1` -
-
+ 1 @@ -613,22 +598,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1` -
-
+ 2 -
-
+ Titan @@ -788,22 +743,7 @@ exports[`props options list is rendered 1`] = ` -
-
+ Enceladus @@ -830,22 +770,7 @@ exports[`props options list is rendered 1`] = ` -
-
+ Mimas @@ -872,22 +797,7 @@ exports[`props options list is rendered 1`] = ` -
-
+ Dione @@ -914,22 +824,7 @@ exports[`props options list is rendered 1`] = ` -
-
+ Iapetus @@ -956,22 +851,7 @@ exports[`props options list is rendered 1`] = ` -
-
+ Phoebe @@ -998,22 +878,7 @@ exports[`props options list is rendered 1`] = ` -
-
+ Rhea @@ -1040,22 +905,7 @@ exports[`props options list is rendered 1`] = ` -
-
+ Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -1082,22 +932,7 @@ exports[`props options list is rendered 1`] = ` -
-
+ Tethys diff --git a/src/components/combo_box/combo_box.spec.tsx b/src/components/combo_box/combo_box.spec.tsx index 6fe737d7003..4910941a1f5 100644 --- a/src/components/combo_box/combo_box.spec.tsx +++ b/src/components/combo_box/combo_box.spec.tsx @@ -58,16 +58,13 @@ describe('EuiComboBox', () => { ], }; - it('defaults to end truncation', () => { + it('defaults to CSS truncation', () => { cy.realMount(); cy.get('[data-test-subj="comboBoxInput"]').realClick(); - cy.get('[data-test-subj="truncatedText"]').should( - 'have.text', - 'Lorem ipsum dolor sit a…' - ); + cy.get('.euiTextTruncate').should('not.exist'); }); - it('allows customizing truncationProps', () => { + it('renders EuiTextTruncate when truncationProps are passed', () => { cy.realMount( { /> ); cy.get('[data-test-subj="comboBoxInput"]').realClick(); + cy.get('.euiTextTruncate').should('exist'); cy.get('[data-test-subj="truncatedText"]').should( 'have.text', 'Lorem ipsum …piscing elit.' diff --git a/src/components/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx index e2151d9ed57..9b1559bfe00 100644 --- a/src/components/combo_box/combo_box.test.tsx +++ b/src/components/combo_box/combo_box.test.tsx @@ -67,14 +67,19 @@ const options: TitanOption[] = [ describe('EuiComboBox', () => { shouldRenderCustomStyles(); - shouldRenderCustomStyles(, { - skip: { parentTest: true }, - childProps: ['truncationProps', 'options[0]'], - renderCallback: async ({ getByTestSubject, findAllByTestSubject }) => { - fireEvent.click(getByTestSubject('comboBoxToggleListButton')); - await findAllByTestSubject('truncatedText'); - }, - }); + shouldRenderCustomStyles( + , + { + skip: { parentTest: true }, + childProps: ['truncationProps', 'options[0]'], + renderCallback: async ({ getByTestSubject, findAllByTestSubject }) => { + fireEvent.click(getByTestSubject('comboBoxToggleListButton')); + await findAllByTestSubject('truncatedText'); + }, + } + ); test('is rendered', () => { const { container } = render(); diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index 470d0e61e2c..217e19e4d18 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -233,11 +233,12 @@ export class EuiComboBoxOptionsList extends Component< searchValue, rootId, } = this.props; - // Individual truncation settings should override component prop - const truncationProps = { - ...this.props.truncationProps, - ..._truncationProps, - }; + + const hasTruncationProps = this.props.truncationProps || _truncationProps; + const truncationProps = hasTruncationProps + ? // Individual truncation settings should override component prop + { ...this.props.truncationProps, ..._truncationProps } + : undefined; if (isGroupLabelOption) { return ( @@ -307,12 +308,18 @@ export class EuiComboBoxOptionsList extends Component< renderTruncatedOption = ( text: string, - truncationProps: EuiComboBoxOptionsListProps['truncationProps'] + truncationProps?: EuiComboBoxOptionsListProps['truncationProps'] ) => { - if (!this.props.searchValue) { + const searchValue = this.props.searchValue.trim(); + + if (!truncationProps && !searchValue) { + // Default to CSS text-overflow + return text; + } + + if (!searchValue) { return ( extends Component< ); } - const searchValue = this.props.searchValue.trim(); const searchPositionStart = this.props.isCaseSensitive ? text.indexOf(searchValue) : text.toLowerCase().indexOf(searchValue.toLowerCase());