refactor: Number field-editor [BAU-722]

[Bohdan Hutsol (bgutsol)]

• Use type="text" instead of type="number", see why

• Number field editor does not allow entering nun-numeric input, like a native input type="number"

• Number field editor has step buttons, like a native input type="number"

• Arrow keys can be used to step as well, like a native input type="number"

• Don't use inputmode=decimal/numeric because some keyboards on mobile devices don't allow typing minus - or dot .. For example, Safari on IOS.

Related PRs:

• fix(number-editor): use "text" input that syncs numeric value when valid #1020
• fix: change input type to number #1112

[netlify]

✅ Deploy Preview for contentful-field-editors ready!

Name	Link
🔨 Latest commit	b849ea9
🔍 Latest deploy log	https://app.netlify.com/sites/contentful-field-editors/deploys/63037f2252b82a0009ab2021
😎 Deploy Preview	https://deploy-preview-1203--contentful-field-editors.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Renato Massao Yonamine (massao)]

LGTM, should we consider adding this to forma??

[Renato Massao Yonamine (massao)]

🥇

[Bohdan Hutsol (bgutsol)]

LGTM, should we consider adding this to forma??

Yes 💯

[Moe Shaaban (mshaaban0)]

LGTM. Not sure about the version release, is this a breaking change?

[Yiotis Kaltsikis (giotiskl)]

Looks good overall, my main suggestion would be to rely on Number.isNaN instead of isNaN, explanation in the comments.

[Bohdan Hutsol (bgutsol)]

Looks good overall, my main suggestion would be to rely on Number.isNaN instead of isNaN, explanation in the comments.

Yiotis Kaltsikis (@giotiskl) thanks for reviewing! I've addressed your comments, please take a look

[Kristoffer (denkristoffer)]

What does it look like?

[Bohdan Hutsol (bgutsol)]

What does it look like?

Kristoffer (@denkristoffer) you can take a look on preview https://deploy-preview-1203--contentful-field-editors.netlify.app/number

[Kristoffer (denkristoffer)]

Looks good, how about some hover and active styling on the buttons though?

[Bohdan Hutsol (bgutsol)]

Looks good, how about some hover and active styling on the buttons though?

Active styling is in place. With hover I agree, we can add some

[Kristoffer (denkristoffer)]

Active styling is in place. With hover I agree, we can add some

I mean the clicked state, I'm not seeing it:

Screen.Recording.2022-08-18.at.14.04.46.mov

[Bohdan Hutsol (bgutsol)]

Active styling is in place. With hover I agree, we can add some

I mean the clicked state, I'm not seeing it:

Screen.Recording.2022-08-18.at.14.04.46.mov

The current active style doesn't work in firefox for some reason 🤔

[Bohdan Hutsol (bgutsol)]

Active styling is in place. With hover I agree, we can add some

I mean the clicked state, I'm not seeing it:
Screen.Recording.2022-08-18.at.14.04.46.mov

The current active style doesn't work in firefox for some reason 🤔

Unfortunately, there is no easy fix for it, it's just the way Firefox implemented its core logic, and it's different from the other browsers.
So basically event.preventDefault();, that I call within onPointerDown callback, cancels the active state for our buttons (only in Firefox). But I can't remove the event.preventDefault(); because I need it to switch the focus from the buttons back to the input for a11y purposes. So the only way to fix it is by setting our custom .active class. But it doesn't worth the effort, in my opinion. What are your thoughts Kristoffer (@denkristoffer)?