Fix disabled items still selectable via hint (#835, #865)

Author: ericgio

src/components/Typeahead/Typeahead.stories.tsx

@@ -95,6 +95,16 @@ AllowNew.args = {
   allowNew: true,
 };
 
+export const DisabledItem = Template.bind({});
+DisabledItem.args = {
+  ...defaultProps,
+  options: options.map((option) =>
+    option.name === 'Alabama'
+      ? { ...option, disabled: true }
+      : { ...option, disabled: false }
+  ),
+};
+
 export const CustomInput = Template.bind({});
 CustomInput.args = {
   ...defaultProps,

src/components/Typeahead/Typeahead.test.tsx

@@ -57,6 +57,7 @@ const {
   InputValidation,
   Pagination,
   AllowNew,
+  DisabledItem,
   CustomMenu,
   Controlled,
 } = composeStories(stories);
@@ -736,6 +737,22 @@ describe('<Typeahead>', () => {
       expect(getMenu()).not.toBeInTheDocument();
       expect(hint).toHaveValue('');
     });
+
+    it('only displays a hint for non-disabled items', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<DisabledItem />);
+      const input = getInput();
+      const hint = getHint(container);
+
+      await user.type(input, 'Ala');
+
+      // The hint should not display if the initial item is disabled.
+      expect(hint).toHaveValue('');
+
+      await user.clear(input);
+      await user.type(input, 'Ari');
+      expect(hint).toHaveValue('Arizona');
+    });
   });
 
   describe('behavior when selecting the hinted result', () => {

src/components/Typeahead/__snapshots__/Typeahead.test.tsx.snap

@@ -223,6 +223,38 @@ exports[`<Typeahead> Default story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Typeahead> DisabledItem story renders snapshot 1`] = `
+<div
+  class="rbt"
+  style="outline: none; position: relative;"
+  tabindex="-1"
+>
+  <div
+    style="display: flex; flex: 1; height: 100%; position: relative;"
+  >
+    <input
+      aria-autocomplete="both"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      autocomplete="off"
+      class="rbt-input-main form-control rbt-input"
+      placeholder="Choose a state..."
+      role="combobox"
+      type="text"
+      value=""
+    />
+    <input
+      aria-hidden="true"
+      class="rbt-input-hint"
+      readonly=""
+      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.54); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%;"
+      tabindex="-1"
+      value=""
+    />
+  </div>
+</div>
+`;
+
 exports[`<Typeahead> InputGrouping story renders snapshot 1`] = `
 <div
   class="input-group"

src/utils/getHintText.test.ts

@@ -60,6 +60,18 @@ describe('getHintText', () => {
     expect(hintText).toBe('');
   });
 
+  it('returns an empty string when the initial item is disabled', () => {
+    const initialItem = { ...props.initialItem, disabled: true };
+    const hintText = getHintText({ ...props, initialItem });
+    expect(hintText).toBe('');
+  });
+
+  it('returns the hint string when the initial item is not disabled', () => {
+    const initialItem = { ...props.initialItem, disabled: false };
+    const hintText = getHintText({ ...props, initialItem });
+    expect(hintText).toBe('alAbama');
+  });
+
   it('handles string with composed diacritical marks', () => {
     const hintText = getHintText({
       ...props,

src/utils/getHintText.ts

@@ -38,6 +38,8 @@ function getHintText({
     !initialItem ||
     // The initial item is a custom option.
     (!isString(initialItem) && hasOwnProperty(initialItem, 'customOption')) ||
+    // The initial item is disabled
+    (!isString(initialItem) && initialItem.disabled) ||
     // One of the menu items is active.
     activeIndex > -1 ||
     // There's already a selection in single-select mode.