Unexpected behaviour for numerical input field in firefox

[gpetretto]

I am opening this issue to point out an unexpected way of handling the numerical field inputs generated by the crystal toolkit in firefox. I am not sure if this should be considered a bug, since it does not depend entirely on the crystal toolkit, so my aim is mostly to highlight the existence and the cause of this issue, in case someone else experiences it.

As you can see below, when acting on the field with the arrows the changes are not taken into account, while changing the field by typing the numbers directly works correctly

https://user-images.githubusercontent.com/8665734/219603465-c0165c74-bd4f-4bf2-9272-173331dc4f1c.mp4

As far as I have tested, this only happens in firefox, both on MacOS and windows. With Chrome, edge and safari everything seems to work as expected. I demonstrated this on a crystal toolkit example, but the same happens for other fields and on the materials project website as well.

The reason seems to be related to the debounce option set in the get_numerical_input method of the MPComponent

https://github.com/materialsproject/crystaltoolkit/blob/1a44b2d60e85ad8822f02f6cb2447a791ceea739/crystal_toolkit/core/mpcomponent.py#L442

It seems that in firefox using the arrows to set the input value does not result in the field getting the focus and thus the changes are then ignored (see https://bugzilla.mozilla.org/show_bug.cgi?id=1012818 for example). In other browsers the field instead seems to get the focus when using the arrow buttons, so there is no issue there.

In case this needs to be fixed, setting debounce to False would probably be a bad idea, since this might trigger unexpected callbacks in some of the components. An option would be to remove the type="number" option. This would avoid tricking the user by removing the arrows buttons entirely.