Bugfix/combobox disable autocomplete in firefox on android #3201
Conversation
… broken in Firefox on Android The bug is that after three "correct" characters are entered in a row, the autocomplete inserts the third character incorrectly, messing up the text in the input. This also happens in other implementations of autocomple, like W3C's ARIA Authoring Practices Guide combobox with inline autocomple.
🦋 Changeset detectedLatest commit: c8696e2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Storybook demo42a47ca29 | 90 komponenter | 141 stories |
| const [isFirefoxOnAndroid, setIsFirefoxOnAndroid] = useState(false); | ||
| useEffect(() => { | ||
| setIsFirefoxOnAndroid(/Android.+Firefox\//.test(navigator.userAgent)); | ||
| }, []); |
There was a problem hiding this comment.
Do we need to use useState and useEffect for this?
There was a problem hiding this comment.
That was the solution we agreed on to safely use navigator.userAgent, so it does not run on the server.
I suggested just nullchecking instead, but I don't know if that would work.
There was a problem hiding this comment.
Can test without in /examples/next-appdir if we want to make sure.
There was a problem hiding this comment.
Maybe something like this could work:
const isFirefoxOnAndroid = /Android.+Firefox\//.test(
typeof navigator === "undefined" ? "" : navigator.userAgent,
);There was a problem hiding this comment.
The above code seems to be working in Nextjs. If we care about micro-optimizations we can use includes() instead, since regex is known to be a bit slow in JS. I guess it would be something like this:
const userAgent =
typeof navigator === "undefined" ? "" : navigator.userAgent;
const isFirefoxOnAndroid =
userAgent.includes("Android") && userAgent.includes("Firefox/");There was a problem hiding this comment.
☝️ Can confirm works with nextjs app-router, astro and shadow-dom
There was a problem hiding this comment.
indexOf og Includes er best confirmed! (med en veldig basic test da 😂 )
https://www.measurethat.net/Benchmarks/Show/14772/0/includes-vs-test-vs-match-vs-indexof
There was a problem hiding this comment.
Great! I just changed the code according to the last suggestion by @HalvorHaugan.
Just a final check: Is it okay to look up the user agent on every render like this?
There was a problem hiding this comment.
Can't see us having any performance boosts by memoizing it, so should be fine 🤞
There was a problem hiding this comment.
All right! If someone could re-approve this PR, then I'll merge it.
it-vegard
deleted the
bugfix/combobox-disable-autocomplete-in-firefox-on-android
branch
Description
Fixes #3200 temporarily.
The bug is that after three "correct" characters are entered in a row, the autocomplete inserts the third character incorrectly, messing up the text in the input.
This also happens in other implementations of autocomple, like W3C's ARIA Authoring Practices Guide combobox with inline autocomple. As such, it seems like a browser issue, so we will just shut off the feature in this browser for now, and try to revisit this later.
Component Checklist 📝
@navikt/core/css/config/_mappings.js)@navikt/core/css/tokens.json)@navikt/aksel-stylelint/src/deprecations.ts)@navikt/core/react/src/index.tsand@navikt/core/react/package.json)@navikt/core/css/index.css)<Component>: <gitmoji?> <Text>.E.g. "Button: ✨ Add feature xyz.")