chore: Autocomplete tweaks

CrowdStrike · Jul 24, 2023 · 9ef84d2 · 9ef84d2
1 parent 5e0060b
commit 9ef84d2
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 389 deletions.
diff --git a/.changeset/smart-mice-crash.md b/.changeset/smart-mice-crash.md
@@ -0,0 +1,6 @@
+---
+'@crowdstrike/ember-toucan-core': minor
+'@crowdstrike/ember-toucan-form': minor
+---
+
+Removed from Autocomplete support for `@options` as an array of objects.
diff --git a/.changeset/twelve-gifts-camp.md b/.changeset/twelve-gifts-camp.md
@@ -13,7 +13,6 @@ If you're using `toucan-core`, the control and field components are exposed:
   @options={{this.options}}
   @contentClass='z-10'
   @selected={{this.selected}}
-  @optionKey='label'
   @noResultsText='No results'
   placeholder='Colors'
   as |autocomplete|
@@ -30,7 +29,6 @@ If you're using `toucan-core`, the control and field components are exposed:
   @label='Label'
   @noResultsText='No results'
   @onChange={{this.onChange}}
-  @optionKey='label'
   @options={{this.options}}
   @selected={{this.selected}}
   placeholder='Colors'

diff --git a/docs/components/autocomplete-field/demo/base-demo.md b/docs/components/autocomplete-field/demo/base-demo.md
@@ -6,14 +6,13 @@
   @label='Label'
   @noResultsText='No results'
   @onChange={{this.onChange}}
-  @optionKey='label'
   @options={{this.options}}
   @selected={{this.selected}}
   placeholder='Colors'
   as |autocomplete|
 >
   <autocomplete.Option>
-    {{autocomplete.option.label}}
+    {{autocomplete.option}}
   </autocomplete.Option>
 </Form::Fields::Autocomplete>
 ```
@@ -56,14 +55,14 @@ export default class extends Component {
       label: 'Teal',
       name: 'teal',
     },
-  ];
+  ].map(({ label }) => label);
 
   @action
   onChange(option) {
     this.selected = option;
     console.log(option);
 
-    if (option.label !== 'Blue') {
+    if (option !== 'Blue') {
       this.errorMessage = 'Please select "Blue"';
       return;
     }

diff --git a/docs/components/autocomplete/demo/base-demo.md b/docs/components/autocomplete/demo/base-demo.md
@@ -5,13 +5,12 @@
     @options={{this.options}}
     @contentClass='z-10'
     @selected={{this.selected}}
-    @optionKey='label'
     @noResultsText='No results'
     placeholder='Colors'
     as |autocomplete|
   >
     <autocomplete.Option>
-      {{autocomplete.option.label}}
+      {{autocomplete.option}}
     </autocomplete.Option>
   </Form::Controls::Autocomplete>
 
@@ -34,14 +33,13 @@
     @options={{this.options}}
     @contentClass='z-10'
     @selected={{this.selected3}}
-    @optionKey='label'
-    @onFilter={{this.onFilterBy}}
+    @onFilter={{this.onFilter}}
     @noResultsText='No results'
     placeholder='Colors w/ Filtering'
     as |autocomplete|
   >
     <autocomplete.Option>
-      {{autocomplete.option.label}}
+      {{autocomplete.option}}
     </autocomplete.Option>
   </Form::Controls::Autocomplete>
 </div>
@@ -93,7 +91,7 @@ export default class extends Component {
       name: 'teal',
       value: 'teal',
     },
-  ];
+  ].map(({ label }) => label);
 
   options2 = [
     'Billy',
@@ -127,16 +125,14 @@ export default class extends Component {
   }
 
   @action
-  onFilterBy(input) {
-    console.log(`filtering with the value "${input}"`);
+  onFilter(value) {
+    console.log(`filtering with the value "${value}"`);
 
-    if (input.length > 0) {
-      return this.options.filter((option) =>
-        option.label.toLowerCase().startsWith(input.toLowerCase())
-      );
-    } else {
-      return this.options;
-    }
+    return value === ''
+      ? this.options
+      : this.options.filter((option) => {
+        return option.toLowerCase().includes(value.toLowerCase())
+      });
   }
 }
 ```
diff --git a/docs/components/autocomplete/index.md b/docs/components/autocomplete/index.md
@@ -88,77 +88,6 @@ export default class extends Component {
 }
 ```
 
-## Option Key
-
-Optional.
-
-The `@optionKey` argument is used when your `@options` take the shape of an array of objects. The `@optionKey` is used to determine two things internally:
-
-1. The displayed value inside of the input of the autocomplete
-2. Used as the key in the default filtering scenario where we filter `@options`. To properly filter the `@options` based on the user input from the textbox, we need to know how to compare the entered value to each object. The `@optionKey` tells us which key of the object to use for this filtering.
-
-In the example below, we set `@optionKey='label'`. Our `@options` objects have a `label` key and we want the label of the selected option to be used for the selected value, as well as for filtering as the user types.
-
-```hbs
-<Form::Controls::Autocomplete
-  @onChange={{this.handleChange}}
-  @options={{this.options}}
-  @optionKey='label'
-  @selected={{this.selected}}
-  as |autocomplete|
->
-  <autocomplete.Option>
-    {{autocomplete.option.label}}
-  </autocomplete.Option>
-</Form::Controls::Autocomplete>
-```
-
-```js
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-export default class extends Component {
-  @tracked selected;
-
-  options = [
-    {
-      label: 'Blue',
-      value: 'blue',
-    },
-    {
-      label: 'Green',
-      value: 'green',
-    },
-    {
-      label: 'Yellow',
-      value: 'yellow',
-    },
-    {
-      label: 'Orange',
-      value: 'orange',
-    },
-    {
-      label: 'Red',
-      value: 'red',
-    },
-    {
-      label: 'Purple',
-      value: 'purple',
-    },
-    {
-      label: 'Teal',
-      value: 'teal',
-    },
-  ];
-
-  @action
-  handleChange(option) {
-    this.selected = option;
-  }
-}
-```
-
 ## onFilter
 
 Optional.
@@ -170,7 +99,6 @@ By default, when `@options` are an array of strings, the built-in filtering does
   @onFilter={{this.handleFilter}}
   @onChange={{this.handleChange}}
   @options={{this.options}}
-  @optionKey='label'
   @selected={{this.selected}}
   as |autocomplete|
 >

diff --git a/docs/toucan-form/changeset-validation/demo/base-demo.md b/docs/toucan-form/changeset-validation/demo/base-demo.md
@@ -32,11 +32,10 @@
     @name='color'
     @noResultsText='No results'
     @options={{this.options}}
-    @optionKey='label'
     as |autocomplete|
   >
     <autocomplete.Option>
-      {{autocomplete.option.label}}
+      {{autocomplete.option}}
     </autocomplete.Option>
   </form.Autocomplete>
 

diff --git a/packages/ember-toucan-core/src/components/form/controls/autocomplete.hbs b/packages/ember-toucan-core/src/components/form/controls/autocomplete.hbs
@@ -30,7 +30,11 @@
       }}
       {{on
         "blur"
-        (if this.isDisabledOrReadOnlyOrWithoutOptions this.noop this.resetValue)
+        (if
+          this.isDisabledOrReadOnlyOrWithoutOptions
+          this.noop
+          this.resetEverything
+        )
       }}
       {{on
         "click"
@@ -41,7 +45,9 @@
       {{on
         "click"
         (if
-          this.isDisabledOrReadOnlyOrWithoutOptions this.noop this.selectInput
+          this.isDisabledOrReadOnlyOrWithoutOptions
+          this.noop
+          this.highlightInputValue
         )
       }}
       {{on