Disable autofill on mgt-search-box

[dougroutledge]

Please make the auto-fill optional on this control. Many times is drops over important parts of the search results, frustrating users.

[Mnickii]

Hi @dougroutledge, which browser are you using this control on?

[dougroutledge]

Edge, Chrome, Brave

[Mnickii]

It's likely that this is an external feature, seeing as our control has autocomplete set to off. See this similar issue on edge

[dougroutledge]

It's definitely not, the other input controls do not exhibit it, and the normal autocomplete ones that do on other pages, do not look the same graphically. This is 100% from the underlying fluent control being used. A way to turn it off that passes through to that would be nice.

[GuillermoCasalCaro]

I had the same problem with the mgt-people-picker, I was able to turn it off programmatically querying the DOM and setting the autocomplete attribute of the control to off. By default the autocomplete property is being set in the parent component instead of the input itself.

I'm using React + Typescript:

useEffect(() => {
    const fluent = ref.current?.shadowRoot?.querySelector('#people-picker-input');
    const inputControl = fluent?.shadowRoot?.querySelector('#control');
    if (!inputControl) return;
    (inputControl as HTMLInputElement).setAttribute('autoComplete', 'off');
}, []);