[EuiComboBox] Optional case sensitive option matching #6268

thompsongl · 2022-09-27T18:30:12Z

Summary

Closes #1997

Adds a isCaseSensitive prop to EuiComboBox (defaults to false)
Refactors collectMatchingOption and getMatchingOptions utils to accept object param
Implements case sensitive option matching

Checklist

kibanamachine · 2022-09-27T18:59:10Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6268/

kibanamachine · 2022-09-27T19:59:19Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6268/

kibanamachine · 2022-09-28T16:48:00Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6268/

cee-chen · 2022-09-30T16:13:34Z

@thompsongl FYI that on the first character, I'm still getting autosuggest/highlight prompts that aren't correctly matching case:

it fixes itself within 2 characters but it seems odd that it isn't working on one.

thompsongl · 2022-09-30T16:19:31Z

Hmm good catch. Looking...

thompsongl · 2022-09-30T16:39:13Z

I'm still getting autosuggest/highlight prompts that aren't correctly matching case

Ah I see what's happening. The highlight/mark is in the wrong spot; Mimas does have a lower case m, so case sensitivity is working, just not highlighting the right character(s).

kibanamachine · 2022-09-30T17:36:58Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6268/

kibanamachine · 2022-09-30T19:29:53Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6268/

cee-chen

last two comments are the only two non-optional comments

cee-chen · 2022-09-30T19:39:25Z

src-docs/src/views/combo_box/case_sensitive.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';


[extremely optional] it might be nice to potentially make this a .tsx file instead of JS to dogfood/catch any type friction points, feel free to skip though

src/components/combo_box/combo_box.test.tsx

cee-chen · 2022-09-30T19:44:36Z

src/components/combo_box/combo_box.tsx

@@ -122,7 +123,11 @@ export interface _EuiComboBoxProps<T>
   * `startsWith`: moves items that start with search value to top of the list;
   * `none`: don't change the sort order of initial object
   */
-  sortMatchesBy: 'none' | 'startsWith';
+  sortMatchesBy: SortMatchesBy;


Nice catch!

cee-chen · 2022-09-30T19:45:11Z

src/components/combo_box/combo_box.tsx

+    matchingOptions: getMatchingOptions<T>({
+      options: this.props.options,
+      selectedOptions: this.props.selectedOptions,
+      searchValue: initialSearchValue,
+      isCaseSensitive: this.props.isCaseSensitive,
+      isPreFiltered: this.props.async,
+      showPrevSelected: Boolean(this.props.singleSelection),
+      sortMatchesBy: this.props.sortMatchesBy,
+    }),


🙏 thanks so much for this cleanup, objects are so much nicer than multiple args once you get over like 3

cee-chen · 2022-09-30T19:48:45Z

src/components/combo_box/matching_options.test.ts

+      const { expected, ...rest } = testCase;
+      expect(getMatchingOptions(rest)).toMatchObject(expected);


super clean! :chefs_kiss:

src/components/combo_box/matching_options.ts

src/components/combo_box/combo_box.tsx

cee-chen · 2022-09-30T21:12:21Z

src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -244,7 +244,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
    return (
      <EuiFilterSelectItem
        style={style}
-        key={option.key ?? option.label.toLowerCase()}
+        key={option.key ?? option.label}


I'm not sure we should have actually removed the .toLowerCase()s in this file, since they're unrelated to searching? although I'm also not sure why it was added in the first place

I was thinking that if users happen to have the same word with different casing (e.g., Test and test) that this could result in the React identical key warning. Not sure there was any value in having toLowerCase in the first place.

cee-chen

I like the transformForCaseSensitivity addition! No other blocking comments from me

kibanamachine · 2022-09-30T21:28:39Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6268/

kibanamachine · 2022-10-03T15:29:33Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6268/

## Summary `eui@67.1.8` ⏩ `eui@70.2.2` ⚠️ Note: This upgrade contains breaking changes to `EuiFlexGroup` and `EuiFlexGrid`, primarily around switching margins and negative margins to `gap`. Please do a quick QA pass of your app to scan for any issues. We're happy to help resolve minor fixes, or potentially follow up after PR merges. You can find us over in #eui! ## [`70.2.4`](https://github.com/elastic/eui/tree/v70.2.4) **Bug fixes** - Fixed visual bug in nested `EuiFlexGroup`s, where the parent `EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not ([#6381](elastic/eui#6381)) ## [`70.2.3`](https://github.com/elastic/eui/tree/v70.2.3) **Bug fixes** - Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change ([#6380](elastic/eui#6380)) ## [`70.2.2`](https://github.com/elastic/eui/tree/v70.2.2) - `EuiButton` now accepts `minWidth={false}` ([#6373](elastic/eui#6373)) **Bug fixes** - `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}` ([#6373](elastic/eui#6373)) - `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton` ([#6373](elastic/eui#6373)) - Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows` ([#6374](elastic/eui#6374)) ## [`70.2.1`](https://github.com/elastic/eui/tree/v70.2.1) **Bug fixes** - Re-fixed `EuiPageSection` not correctly merging `contentProps.css` ([#6365](elastic/eui#6365)) - Fixed `EuiTab` not defaulting to size `m` ([#6366](elastic/eui#6366)) ## [`70.2.0`](https://github.com/elastic/eui/tree/v70.2.0) - Added a keyboard shortcuts popover to `EuiDataGrid`'s toolbar. This can be visually hidden via `toolbarVisibility.showKeyboardShortcuts`, but will always remain accessible to keyboard and screen reader users. ([#6036](elastic/eui#6036)) - `EuiScreenReaderOnly`'s `showOnFocus` prop now also shows on focus within its children ([#6036](elastic/eui#6036)) - Added `onFocus` prop callback to `EuiSuperDatePicker` ([#6320](elastic/eui#6320)) **Bug fixes** - Fixed `EuiSelectable` to ensure the full options list is re-displayed when the search bar is controlled and cleared using `searchProps.value` ([#6317](elastic/eui#6317)) - Fixed incorrect padding on `xl`-sized `EuiTabs` ([#6336](elastic/eui#6336)) - Fixed `EuiCard` not correctly merging `css` on its child `icon`s ([#6341](elastic/eui#6341)) - Fixed `EuiCheckableCard` not setting `css` on the correct DOM node ([#6341](elastic/eui#6341)) - Fixed a webkit rendering issue with `EuiModal`s containing `EuiBasicTable`s tall enough to scroll ([#6343](elastic/eui#6343)) - Fixed bug in `to_initials` that truncates custom initials ([#6346](elastic/eui#6346)) - Fix bug in `EuiCard` where layout breaks when `horizontal` and `selectable` are both passed ([#6348](elastic/eui#6348)) ## [`70.1.0`](https://github.com/elastic/eui/tree/v70.1.0) - Added the `hint` prop to the `<EuiSearchBar />`. This prop lets the consumer render a hint below the search bar that will be displayed on focus. ([#6319](elastic/eui#6319)) - Added the `hasDragDrop` prop to `EuiPopover`. Use this prop if your popover contains `EuiDragDropContext`. ([#6329](elastic/eui#6329)) **Bug fixes** - Fixed `EuiButton`'s cursor style when the button is disabled ([#6323](elastic/eui#6323)) - Fixed `EuiPageTemplate` not recognizing child `EuiPageSidebar`s/`EuiPageTemplate.Sidebar`s with `css` props ([#6324](elastic/eui#6324)) - Fixed `EuiBetaBadge` to always respect its `anchorProps` values, including when there is no tooltip content ([#6326](elastic/eui#6326)) - Temporarily patched `EuiModal` to not cause scroll-jumping issues on modal open ([#6327](elastic/eui#6327)) - Fixed buggy drag & drop behavior within `EuiDataGrid`'s columns & sorting toolbar popovers ([#6329](elastic/eui#6329)) - Fixed `EuiButton` not correctly passing `textProps` for children inside fragments or i18n components ([#6332](elastic/eui#6332)) - Fixed `EuiButton` not correctly respecting `minWidth={0}` ([#6332](elastic/eui#6332)) **CSS-in-JS conversions** - Converted `EuiTabs` to Emotion ([#6311](elastic/eui#6311)) ## [`70.0.0`](https://github.com/elastic/eui/tree/v70.0.0) - Added the `enabled` option to the `<EuiInMemoryTable />` `executeQueryOptions` prop. This option prevents the Query from being executed when controlled by the consumer. ([#6284](elastic/eui#6284)) **Bug fixes** - Fixed `EuiOverlayMask` to set a `[data-relative-to-header=above|below]` attribute to replace the `--aboveHeader` and `--belowHeader` classNames removed in its Emotion conversion ([#6289](elastic/eui#6289)) - Fixed `EuiHeader` CSS using removed `EuiOverlayMask` class modifiers ([#6293](elastic/eui#6293)) - Fixed `EuiToolTip` not respecting reduced motion preferences ([#6295](elastic/eui#6295)) - Fixed a bug with `EuiTour` where passing any `panelProps` would cause the beacon to disappear ([#6298](elastic/eui#6298)) **Breaking changes** - `@emotion/css` is now a required peer dependency, alongside `@emotion/react` ([#6288](elastic/eui#6288)) - `@emotion/cache` is no longer required peer dependency, although your project must still use it if setting custom cache/injection locations ([#6288](elastic/eui#6288)) **CSS-in-JS conversions** - Converted `EuiCode` and `EuiCodeBlock` to Emotion; Removed `euiCodeSyntaxTokens` Sass mixin and `$euiCodeBlockPaddingModifiers`; ([#6263](elastic/eui#6263)) - Converted `EuiResizableContainer` and `EuiResizablePanel` to Emotion ([#6287](elastic/eui#6287)) ## [`69.0.0`](https://github.com/elastic/eui/tree/v69.0.0) - Added support for `fullWidth` prop on EuiForm, which will be the default for all rows/controls within ([#6229](elastic/eui#6229)) - Added support for `onResizeStart` and `onResizeEnd` callbacks to `EuiResizableContainer` ([#6236](elastic/eui#6236)) - Added optional case sensitive option matching to `EuiComboBox` with the `isCaseSensitive` prop ([#6268](elastic/eui#6268)) - `EuiFlexItem` now supports `grow={0}` ([#6270](elastic/eui#6270)) - Added the `alignItems` prop to `EuiFlexGrid` ([#6281](elastic/eui#6281)) - Added `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `indexTemporary`, `infinity`, `sortAscending`, and `sortDescending` glyphs to `EuiIcon` ([#6282](elastic/eui#6282)) **Bug fixes** - Fixed `EuiTextProps` to show the `color` type option `inherit` as default ([#6267](elastic/eui#6267)) - `EuiFlexGroup` now correctly respects `gutterSize` when responsive ([#6270](elastic/eui#6270)) - Fixed the last breadcrumb in `EuiBreadcrumbs`'s `breadcrumbs` array not respecting `truncate` overrides ([#6280](elastic/eui#6280)) **Breaking changes** - `EuiFlexGrid` no longer supports `columns={0}`. Use `EuiFlexGroup` instead for normal flex display ([#6270](elastic/eui#6270)) - `EuiFlexGrid` now uses modern `display: grid` CSS ([#6270](elastic/eui#6270)) - `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` now use modern `gap` CSS instead of margins and negative margins ([#6270](elastic/eui#6270)) - `EuiFlexGroup` no longer applies responsive styles to `column` or `columnReverse` directions ([#6270](elastic/eui#6270)) **CSS-in-JS conversions** - Converted `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` to Emotion ([#6270](elastic/eui#6270)) ## [`68.0.0`](https://github.com/elastic/eui/tree/v68.0.0) - Added `beta` glyph to `EuiIcon` ([#6250](elastic/eui#6250)) - Added `launch` and `spaces` glyphs to `EuiIcon` ([#6260](elastic/eui#6260)) - Added the `fallbackDestination` prop to `EuiSkipLink`, which accepts a string of query selectors to fall back to if the `destinationId` does not have a valid target. Defaults to `main` ([#6261](elastic/eui#6261)) - `EuiSkipLink` is now always an `a` tag to ensure that it is always placed within screen reader link menus. ([#6261](elastic/eui#6261)) **Bug fixes** - Fixed `EuiSuperDatePicker` not correctly merging passed `className`s ([#6253](elastic/eui#6253)) - Fixed `EuiColorStops` not correctly merging in passed `data-test-subj`s, `style`s, or `...rest` ([#6255](elastic/eui#6255)) - Fixed `EuiResizablePanel` incorrectly passing `style` to the wrapper instead of the panel. Use `wrapperProps.style` to pass styles to the wrapper. ([#6255](elastic/eui#6255)) - Fixed custom `onClick`s passed to `EuiSkipLink` overriding `overrideLinkBehavior` ([#6261](elastic/eui#6261)) **Breaking changes** - Removed `inherit` and `ghost` color from `EuiListGroupItem` ([#6207](elastic/eui#6207)) - Changed default color to `text` instead of `inherit` ([#6207](elastic/eui#6207)) **CSS-in-JS conversions** - Converted `EuiListGroup` and `EuiListGroupItem` to Emotion; Removed `$euiListGroupGutterTypes`, `$euiListGroupItemColorTypes` and `$euiListGroupItemSizeTypes`; ([#6207](elastic/eui#6207)) - Converted `EuiBadgeGroup` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiBetaBadge` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiNotificationBadge` to Emotion ([#6258](elastic/eui#6258)) Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

thompsongl added 3 commits September 27, 2022 13:21

refactor API and introduce isCaseSensitive

b7c8762

refactor utils; add isCaseSensitiveProp

1dd5634

CL

0a43b83

Merge branch 'main' into 1997-case

33a509b

thompsongl added 2 commits September 28, 2022 10:54

Merge branch 'main' into 1997-case

60bf62d

docs

d860336

thompsongl marked this pull request as ready for review September 28, 2022 16:19

Dosant mentioned this pull request Sep 29, 2022

[EuiComboBox] Support for case sensitive labels #1997

Closed

Merge branch 'main' into 1997-case

c849cd5

enforce highlight case sensitivity

c028af4

Merge branch 'main' into 1997-case

66e08de

cee-chen reviewed Sep 30, 2022

View reviewed changes

account for more toLowerCase; new transform util

afc26ff

cee-chen reviewed Sep 30, 2022

View reviewed changes

cee-chen approved these changes Sep 30, 2022

View reviewed changes

Merge branch 'main' into 1997-case

b0cc13f

thompsongl enabled auto-merge (squash) October 3, 2022 15:22

thompsongl merged commit 9c8681c into elastic:main Oct 3, 2022

cee-chen mentioned this pull request Nov 8, 2022

Upgrade EUI to v70.2.4 elastic/kibana#144845

Merged

jughosta mentioned this pull request Jan 25, 2023

[Discover] "Add Filter" treats field contents case insensitive, but does filter case sensitive elastic/kibana#142064

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiComboBox] Optional case sensitive option matching #6268

[EuiComboBox] Optional case sensitive option matching #6268

thompsongl commented Sep 27, 2022 •

edited

Loading

kibanamachine commented Sep 27, 2022

kibanamachine commented Sep 27, 2022

kibanamachine commented Sep 28, 2022

cee-chen commented Sep 30, 2022

thompsongl commented Sep 30, 2022

thompsongl commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

cee-chen left a comment

cee-chen Sep 30, 2022

cee-chen Sep 30, 2022

cee-chen Sep 30, 2022

cee-chen Sep 30, 2022

cee-chen Sep 30, 2022 •

edited

Loading

thompsongl Oct 3, 2022

cee-chen left a comment

kibanamachine commented Sep 30, 2022

kibanamachine commented Oct 3, 2022

		const { expected, ...rest } = testCase;
		expect(getMatchingOptions(rest)).toMatchObject(expected);

[EuiComboBox] Optional case sensitive option matching #6268

[EuiComboBox] Optional case sensitive option matching #6268

Conversation

thompsongl commented Sep 27, 2022 • edited Loading

Summary

Checklist

kibanamachine commented Sep 27, 2022

kibanamachine commented Sep 27, 2022

kibanamachine commented Sep 28, 2022

cee-chen commented Sep 30, 2022

thompsongl commented Sep 30, 2022

thompsongl commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

cee-chen left a comment

Choose a reason for hiding this comment

cee-chen Sep 30, 2022

Choose a reason for hiding this comment

cee-chen Sep 30, 2022

Choose a reason for hiding this comment

cee-chen Sep 30, 2022

Choose a reason for hiding this comment

cee-chen Sep 30, 2022

Choose a reason for hiding this comment

cee-chen Sep 30, 2022 • edited Loading

Choose a reason for hiding this comment

thompsongl Oct 3, 2022

Choose a reason for hiding this comment

cee-chen left a comment

Choose a reason for hiding this comment

kibanamachine commented Sep 30, 2022

kibanamachine commented Oct 3, 2022

thompsongl commented Sep 27, 2022 •

edited

Loading

cee-chen Sep 30, 2022 •

edited

Loading