Fixed Misleading handling of some "readonly" inputs with null value

Jaxel

Jaxel

Well-known member
Affected version
2.2
If I put the following code in a template:
<xf:textboxrow name="test_name" value="{$test.name}" readonly="readonly" />
I will properly get the following result:
<input type="text" class="input" readonly="readonly" name="test_name" value="my_value">

HOWEVER, If I put readonly="readonly" in an <xf:select menu, I get a slightly different result. I will instead get:
<select name="test_name" class="is-readonly input" disabled="disabled">
You'll notice there, that it added a disabled="disabled" instead of a readonly="readonly".

This is actually a pretty big flaw. There is a fundamental different in forms between readonly and disabled. Disabled completely disables the form field; so that on submit, the field itself does not get sent to the server. However, with readonly, the field is still enabled, it just can not be changed; so the value in the field is still submitted to the server.
 
Hmm... upon further research, it appears that readonly is not a valid attribute on certain form fields. Mainly form fields with immutable characteristics, such as radial menus, checkboxes and select menus. So this is not a XenForo bug, but a limitation of the HTML spec. In order to work around this, you can either add a hidden form field, or use a verification function.

developer.mozilla.org

HTML attribute: readonly - HTML: HyperText Markup Language | MDN

The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.
developer.mozilla.org developer.mozilla.org
 
Jaxel said:
In order to work around this, you can either add a hidden form field, or use a verification function.
Click to expand...
For what it's worth, XF should automatically add the necessary hidden inputs for a read-only select input if a non-null value is passed in.
 
Jaxel said:
It doesn't.
Click to expand...
I can't reproduce this.

HTML: 
<xf:selectrow name="test" value="1" readonly="readonly"
    label="Label">

    <xf:option value="0">0</xf:option>
    <xf:option value="1">1</xf:option>
</xf:selectrow>

Produces a hidden input below the select row as expected:
HTML: 
<input type="hidden" name="test" value="1">

Please post reproduction steps if you're experiencing something different.
 
Jeremy P said:
I can't reproduce this.

HTML: 
<xf:selectrow name="test" value="1" readonly="readonly"
    label="Label">

    <xf:option value="0">0</xf:option>
    <xf:option value="1">1</xf:option>
</xf:selectrow>

Produces a hidden input below the select row as expected:
HTML: 
<input type="hidden" name="test" value="1">

Please post reproduction steps if you're experiencing something different.
Click to expand...
It seems to only provide the hidden field IF there is an existing value. It does not default to the first option value otherwise.
 
Right, that's what I meant by if there is a non-null value passed in. I can see how that might be unexpected though since the disabled input will appear to have the first item selected, so it is probably worth us making changes here. You can use something like value="{{ $value ?: 'default' }}" in the meantime.
 
Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.2.9).

Change log:
Default to the first option value for read-only select inputs
Click to expand...
There may be a delay before changes are rolled out to the XenForo Community.
 
Back
Top Bottom