[#30885] - [4] Hide up/down selector arrows on HTML5 Number textboxes
- Closed
- 11 Jun 2021
- Medium
- Build: master
- # 30885
Steps to reproduce the issue
Throughout Joomla 4 there are input boxes of type="number" - this correctly, in browsers, provided an up and down selector arrow.
However, a lot of the number boxes Joomla uses for readonly data - and Joomla 4 disables these textboxes to show the user they cannot be modifies.
However, disabling a textbox of type="number" doesn't remove the up/down arrows, and could lead to confusion that these numbers can be changed, indeed the browser shows visual feedback when they are clicked, even though the number doesn't change.
A VERY quick google shows me that the arrows CAN be hidden by CSS easily, and thus applied if a textbox of type="number" is disabled.
https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp
Expected result
Same as actual result, but without the browser added up and down arrows on disabled fields.
Actual result
System information (as much as possible)
safari on mac
Additional comments
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Title |
|
||||||
CSS is not "overriding native html5" its styling it, the same way as you have greyed out the background, and removed the select boxes dropdown arrows and styled file upload fields. The password html5 fields are overriden with hide/show javascript toggles for example.
There are valid reasons for numeric inputs without any spinner arrows:
- Verification codes
- Credit card numbers
- numbers where the change is not sequential, but in 100s or 1000s
Yes you STILL want numeric inputs there because it init the numeric keyboard on touch devices but the arrows make no sense in these occasions.
On a disabled field - they make no sense.
On an enabled field - sure, I'll agree with you, don't attempt to style them, move them, or manipulate them. When it makes sense not to do so.
On a disabled/readonly field the arrows do not appear at all in
Chrome Windows
Edge Windows
They do appear on Firefox
A possible fix is to change the type attribute to text. Revision is an integer yet it is specified as a text.
<field
name="version"
type="text"
label="COM_CONTENT_FIELD_VERSION_LABEL"
size="6"
class="readonly"
readonly="true"
filter="unset"
/>
I dont understand why these are even form fields. They can never be used, and therefore displaying them using form xml is just plainly wrong.
But then this is not the only place that Joomla does this kind of thing...
But what about the ID field that is directly below it?! Same issue!
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-06-11 15:09:11 |
| Closed_By | ⇒ | PhilETaylor |
We should not override native html5