User tests: Successful: Unsuccessful:
Pull Request for Issue #27760 .
Adds the disabled
attribute to the switcher fields if in the XML either readonly
or disabled
is set.
Since readonly
isn't a valid attribute for radios (which technically a switcher still is), I just add disabled
in that case.
I haven't touched CSS as I leave that to people who have a clue about design.
Imho it should be made visible somehow that the field is disabled.
See Issue #27760
"Locked" Switcher
Switcher can be toggled
None
Status | New | ⇒ | Pending |
Category | ⇒ | Layout |
Readonly and disabled attributes are not the same. Values of disabled inputs are not submitted to the server. When readonly is used, selected radio should not be disabled.
The thing is, there is no readonly attribute for radio elements. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly.
I've used the same behavior we already use in J3 and in the radio buttons.
We can emulate readonly behavior by disabling all inputs except currently selected. Not sure how accessible that is though. @brianteeman any thoughts?
Treating readonly and disabled the same is no good. We need to have the selected value submitted when readonly is used. It's not a matter of whether HTML element supports it or not, it's about how we implement the functionality in our fields.
can someone tell me the use case for this
Not allowing to change the value after the form was submitted for the first time. Or having a field disabled until another field has been filled in.
As said, readonly
doesn't exist for that type of input.
I just added it for convenience and since it was already in J3 and in the button layout. The readonly and disabled attribute set in the XML will both result in a disabled radio/switcher/button input.
The dev using a readonly/disabled element has to take care of this on PHP side. You couldn't trust the submitted value anyway as the user could remove the disabled/readonly attribute in the browser.
I have tested this item
I think this implementation is user-friendly. The normal user does not know that there is no readonly
for the radio
type. He doesn't even know that the switcher is a radio
input. At readonly
, he expects exactly what bakual has programmed technically correctly here.
@brianteeman Just as for the button, there are also use cases for the switch. You want to show that it is an option, but that it is deactivated with the current settings.
It only bothered me that the appearance does not change. It looks like a mistake. That's why I added a PR here.
@Bakual If you like, please merge or add to your code.
For my test I added
disabled = "1"
to a switch in the file
joomla-cms4/administrator/components/com_templates/forms/source.xml
I tested also with
readonly = "true"
disabled = "true"
readonly = "1"
I tested also with the from me applied change. It looks like this:
Labels |
Added:
?
|
Category | Layout | ⇒ | Administration Templates (admin) Layout |
If you like, please merge or add to your code.
Merged. Thanks for the help!
I have tested this item
Status | Pending | ⇒ | Ready to Commit |
RTC
Status | Ready to Commit | ⇒ | Pending |
Setting back to Pending as there has only been one successful test.
Status | Pending | ⇒ | Ready to Commit |
RTC
Status | Ready to Commit | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-03-22 21:02:54 |
Closed_By | ⇒ | zero-24 | |
Labels |
Added:
?
|
For the CSS side, the div containing the switcher has now an additional class when disabled. So it should be possible to target the disabled switchers with
div.switcher.disabled
. Hope that helps.