[Bug]: Chips input will clear itself after a key press during autocomplete

[Jerit3787]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

When I was investigating for #642, I noticed that the chips are not working as expected. As the user presses a key, the input field will clear itself.

Current Behavior

Every time the user presses a key, the input field will be cleared.

Screen.Recording.2025-09-03.at.3.27.35.PM.mov

Expected behavior

The input field should not clear itself until the user completes the autocomplete.

Screen.Recording.2025-09-03.at.3.30.22.PM.mov

Possible Solutions or Causes

Inside the code, the autocomplete should clear when the user selects an autocomplete but unknown reason, the onAutocomplete is run after each time users presses a key which mimics the onSearch event (not sure if it is the intended behavior). A temporary fix would be to only clear once the user has enter the text. Following code would be a temporary fix.

_setupAutocomplete() {
            this.options.autocompleteOptions.onAutocomplete = (items) => {
                if (items.length > 0) { // add this bracket
                    this.addChip({
                        id: items[0].id,
                        text: items[0].text,
                        image: items[0].image
                    });
                    this._input.value = '';
                } // add this bracket
                this._input.focus();
            };
            this.autocomplete = Autocomplete.init(this._input, this.options.autocompleteOptions);
        }

After this fix, another weird behavior I noticed that, after the user selects the options, the autocomplete no longer shown if the user continues to write. I think this is due to autocomplete was intended for one-time user input. The fix would be the user needs to unfocus and refocus the text field in order for the autocomplete to work again. For this, I do not know to fix as it involves on how autocomplete works.

Screen.Recording.2025-09-03.at.3.38.21.PM.mov

Again another temporary fix is to defocus/blur the text field and force the user to reclick at the field to initiate the autocomplete again. The complete temporary fix is to replace the focus function inside the _setupAutocomplete() function

_setupAutocomplete() {
            this.options.autocompleteOptions.onAutocomplete = (items) => {
                if (items.length > 0) {
                    this.addChip({
                        id: items[0].id,
                        text: items[0].text,
                        image: items[0].image
                    });
                    this._input.value = '';
                    this._input.blur() // blurs only when the user has selected the items.
                }
                // this._input.focus(); replace with this
            };
            this.autocomplete = Autocomplete.init(this._input, this.options.autocompleteOptions);
        }

Steps to reproduce

1. Create an chips autocomplete
2. Initialize with the sample and allowUserInput: true option
3. Enter some text into the text field to trigger the autocomplete.

Your Environment

• Version used: latest v2-dev
• Browser Name and version: Safari 18.5
• Operating System and version (desktop or mobile): macOS 18.5
• Additional information you want to tell us:
  • this bug only appear in v2-dev branch. But in production build, autocomplete does not work.

[gselderslaghs]

This issue won't fix for now, I've been spending my time investigating the cause, I was able to find the cause of the bug, I was not able to fix it at this time, see below

materialize/src/autocomplete.ts

Lines 514 to 517 in 7134663

	if (!this.dropdown.isOpen) {
	setTimeout(() => {
	this.dropdown.open();
	}, 0); // TODO: why?

Event:

• this condition seem to only be triggered on first interaction with the input field (mouse/keyboard event interaction)

materialize/src/autocomplete.ts

Line 518 in 7134663

} else this.dropdown.recalculateDimensions(); // Recalculate dropdown when its already open

Event:

• this condition seem to only be triggered on secondary interaction with the input field (keyboard event)

What's (not) happening on this method invokation in different scenarios:

• open the dropdown visually on a secondary input interaction by keyboard event if the previous option was selected by a keyboard event
• does not open the dropdown visually on a secondary input interaction by keyboard event if the previous option was selected by a mouse event
• open the dropdown visually on a secondary input interaction, by mouse interaction when keyboard interaction has been made and the previous option was selected by a mouse event
  possible cause:
• the width and height where not set if the previous option was selected by a mouse event which makes the dropdown not visually visible
  additional debug:
• as this occurs on autocomplete integration with chips component, should create use-case on standalone autocomplete component as test-case as wel