search

microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
953 stars 306 forks source link

Disable autofill on mgt-search-box #3287

Open dougroutledge opened 2 months ago

dougroutledge commented 2 months ago

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

image

Mnickii commented 1 month ago

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

dougroutledge commented 1 month ago

Edge, Chrome, Brave

Mnickii commented 1 month ago

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 commented 1 month ago

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 commented 1 week ago

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');
}, []);

image