[autocomplete] With autoComplete + autoHighlight the highlighted option should appears inline

Hi,there. I'm not sure this is a bug or feature. When <Autocomplete autoComplete autoHighlight />, the first option not appears inline after the input cursor immediately. It work as expected when selection move up/down.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

If this is a bug, the default highlighted option NOT inline after the input cursor immediately when autoHighlight is on.

Expected Behavior 🤔

If this is a bug, the default highlighted option should inline after the input cursor immediately when autoHighlight is on.

Steps to Reproduce 🕹

Steps:

https://codesandbox.io/s/material-demo-forked-pifom
type a
the input should be become Andorra

Sure, will do it

@xiaoyu-tamu I'm not sure the behavior is exactly the one you expect, so please let us know.

One of the issues I have seen can be observed on https://codesandbox.io/s/staging-haze-w6wps?file=/src/App.js. Yeah, rereading the issue description, the proposed change is off probably not something we want to change.

This one should work better:

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index a9d8d48de3..a9dc88789d 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -15,6 +15,20 @@ function stripDiacritics(string) {
     : string;
 }

+function usePrevious(value) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = React.useRef();
+
+  // Store current value in ref
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}
+
 export function createFilterOptions(config = {}) {
   const {
     ignoreAccents = true,
@@ -829,6 +843,29 @@ export default function useAutocomplete(props) {
     }
   };

+  const prevInputValue = usePrevious(inputValue);
+
+  React.useEffect(() => {
+    if (
+      autoComplete &&
+      prevInputValue !== undefined &&
+      inputValue.length > prevInputValue.length &&
+      filteredOptions[highlightedIndexRef.current]
+    ) {
+      const option = getOptionLabel(filteredOptions[highlightedIndexRef.current]);
+
+      // The portion of the selected suggestion that has not been typed by the user,
+      // a completion string, appears inline after the input cursor in the textbox.
+      const index = option.toLowerCase().indexOf(inputValue.toLowerCase());
+      if (index === 0 && inputValue.length > 0) {
+        setTimeout(() => {
+          inputRef.current.value = option;
+          inputRef.current.setSelectionRange(inputValue.length, option.length);
+        });
+      }
+    }
+  }, [prevInputValue, inputValue, filteredOptions, autoComplete, getOptionLabel]);
+
   const handleOptionMouseOver = (event) => {
     setHighlightedIndex({
       event,

It reproduces how Chrome URL bar behaves. It was pretty hard to figure out! If somebody could confirm that it's the expected behavior, it would be great, we would also need to add test cases.

can I work on this?

@Morteza-Jenabzadeh It's not a simple one but definitely :). We would need to clean up the proposed diff, e.g. Clear timeout, make sure it behave correctly and add end to e'd tests.

I try my best :)

I have come up with this test :

 it('Change input in a case filter has a result and autocomplete ans autoHighlight', () => {
      const handleHighlightChange = spy();
      const handleInputChange = spy();
      const options = ['one', 'two', 'three'];
      const { getByRole } = render(
        <Autocomplete
          onHighlightChange={handleHighlightChange}
          onInputChange={handleInputChange}
          options={options}
          autoComplete
          autoHighlight
          open
          renderInput={(params) => <TextField {...params} autoFocus />}
        />,
      );
      const textbox = getByRole('textbox');
      fireEvent.change(document.activeElement, { target: { value: 'on' } });
      expect(handleHighlightChange.callCount).to.equal(3);

      // expect(handleHighlightChange.args[2][0]).to.not.equal(undefined);
      expect(handleHighlightChange.args[2][1]).to.equal(options[0]);
      expect(handleHighlightChange.args[2][2]).to.equal('auto');

      fireEvent.keyDown(textbox, { key: 'Enter' });
      expect(textbox).toHaveFocus();
      expect(handleHighlightChange.callCount).to.equal(4);
      expect(handleInputChange.args[1][0]).to.not.equal(undefined);
      expect(handleInputChange.args[1][1]).to.equal(options[0]);
      expect(handleInputChange.callCount).to.equal(2);
      const input = getByRole('textbox');
      expect(input.value).to.equal('one');
    });

but this line yield error

 expect(handleHighlightChange.args[2][0]).to.not.equal(undefined);

I cant figure out why event is undefined !

I'll be happy if you give me a hint about this and also have not got any clue about when we should clear time out.

@f1nan You are good to go to experiment with it :).

@oliviertassinari

@oliviertassinari I would like to claim this.

Is this feature available now?

I'm picking this up. On current master (daaa525c), I reproduced the missing inline completion in a React/JSDOM hook harness: with autoComplete and autoHighlight, typing a or and highlights Andorra but leaves only the typed text in the input. Arrow navigation completes it correctly.

I'll keep the change focused on this interaction and add real-browser/E2E coverage for typing through the completion, deletion/editing, keyboard navigation, and controlled input. I'll preserve the existing freeSolo behavior and account for the one-line approach rejected earlier in this thread. This work will use AI assistance.

@michael-land

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@michael-land Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.

Navigation Menu

Repository navigation

[autocomplete] With `autoComplete` + `autoHighlight` the highlighted option should appears inline #22648

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

[autocomplete] With autoComplete + autoHighlight the highlighted option should appears inline #22648

Description

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Activity

oliviertassinari commented on Sep 20, 2020

michael-land commented on Sep 20, 2020

oliviertassinari commented on Sep 20, 2020

oliviertassinari commented on Sep 20, 2020

oliviertassinari commented on Sep 20, 2020

morijenab commented on Sep 22, 2020

oliviertassinari commented on Sep 22, 2020

morijenab commented on Sep 22, 2020

morijenab commented on Sep 27, 2020

oliviertassinari commented on Nov 13, 2020

vividh commented on Oct 9, 2021

rupam71 commented on Apr 2, 2022

dvd233 commented on Oct 5, 2026

github-actions commented on Oct 13, 2026

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions

[autocomplete] With `autoComplete` + `autoHighlight` the highlighted option should appears inline #22648