Combobox in Fluent v2 web components no longer support autocomplete=both unlike the old version

[motss]

Fluent UI v2 Combobox (web components) drops autocomplete=both. The old version handled filtering natively. Now, it seems we need to implement custom filtering, similar to the React version's hook. freeform isn't a direct replacement. Any ideas on how to replicate the autocomplete behavior or is it going to be implemented natively in combobox/dropdown?

[Yiosko]

In Fluent UI v2 Web Components, the Combobox component has deprecated the autocomplete="both" attribute, which previously provided native filtering of options based on user input. This change necessitates implementing custom filtering logic to achieve similar behavior.

To replicate the autocomplete functionality:

1. Implement Custom Filtering: Attach an event listener to the input event of the Combobox. Within this handler, filter the available options based on the user's input and update the displayed options accordingly.

   Example:

   const combobox = document.querySelector('fluent-combobox');
   const allOptions = [...combobox.querySelectorAll('fluent-option')];
   
   combobox.addEventListener('input', (event) => {
     const inputValue = event.target.value.toLowerCase();
     combobox.innerHTML = ''; // Clear current options
   
     allOptions.forEach(option => {
       if (option.textContent.toLowerCase().includes(inputValue)) {
         combobox.appendChild(option);
       }
     });
   });



2. Utilize the freeform Attribute: If you want to allow users to input values not present in the predefined options, set the freeform attribute on the Combobox. This enables users to enter custom values.

   Example:

   <fluent-combobox freeform>
     <fluent-option>Option 1</fluent-option>
     <fluent-option>Option 2</fluent-option>
     <fluent-option>Option 3</fluent-option>
   </fluent-combobox>



However, note that freeform alone does not provide filtering of the options; it only allows custom input. citeturn0search6

3. Monitor Official Updates: The Fluent UI team has acknowledged the need for more consistent filtering capabilities in the Combobox component and plans to address this in future updates. Keeping an eye on the [official GitHub repository](https://github.com/microsoft/fluentui) will provide information on upcoming features and enhancements.

By implementing custom filtering and utilizing the freeform attribute as needed, you can effectively replicate the previous autocomplete behavior in the current Combobox component.