Form API: #size and #maxlength properties have no effect for '#type' => 'number' (ignored by browsers)

[klonos]

This is not a bug with Backdrop - adding '#size' => 4 and 'maxlength' => 3 does result in <input type="number" ... size="4" ... maxlength="3" ...>, but no browser supports these, nor are there plans to support them. We should either remove them from the FAPI documentation, or figure out a workaround. I thought that perhaps using the attr() CSS function (supported by all major browsers for years now), to set the field width depending on what was set for #size.

This issue becomes apparent when you specify '#min' but no '#max':
[screenshots coming up]

Relevant sources around the web:

• https://stackoverflow.com/questions/22709792/input-type-number-wont-resize (suggests using CSS width instead)
• https://stackoverflow.com/questions/12066436/styling-html5-input-type-number/12066830 (suggests using CSS width instead)
• https://www.wufoo.com/html5/size-attribute

  Valid for <select> and input of type text, search, tel, url, email, and password. Otherwise it is ignored.

• https://newbedev.com/maxlength-ignored-for-input-type-number-in-chrome (suggests using JS events to implement "maxlength" on number inputs)

Backdrop Form API documentation that will need to be updated

• number field type: https://docs.backdropcms.org/form_api#number
• #size property: https://docs.backdropcms.org/form_api#size

  Width of the textfield (in characters) or size of multiselect box (in lines).

• #maxlength property: https://docs.backdropcms.org/form_api#maxlength

  The maximum amount of characters to accept as input.

[indigoxela]

@klonos wait a minute... #size is supported and works as expected (in some browsers) with number input elements. It's used in contrib projects (I know at least one 😉).

#maxlength makes no sense with number input, so it's correct to remove that from the FAPI docs.

However, this is the wrong issue queue for that change. This issue should go to https://github.com/backdrop-ops/docs.backdropcms.org/issues

[klonos]

#size is supported and works as expected with number input elements.

No it doesn't. Example form to demonstrate:

  $form['number_1'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 1 - no #min or #max set'),
    '#size' => 1,
  );
  $form['number_100'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 100 - no #min or #max set'),
    '#size' => 100,
  );
  $form['number_9999999'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 9999999 - no #min or #max set'),
    '#size' => 9999999,
  );
  $form['number_min_no_max'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 1 and #min to 1 - no #max set'),
    '#size' => 9999999,
    '#min' => 1,
  );
  $form['number_max_no_min'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 9999999 and #max to 5 - no #min set'),
    '#size' => 9999999,
    '#max' => 5,
  );
  $form['number_min_and_max'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 9999999, #min to 1, and #max to 20'),
    '#default_value' => 11,
    '#size' => 9999999,
    '#min' => 1,
    '#max' => 20,
  );
  $form['number_min_and_max_no_size'] = array(
    '#type' => 'number',
    '#title' => t('number with #min set to 1, and #max to 12345 - no #size set'),
    '#default_value' => 11111,
    '#min' => 1,
    '#max' => 12345,
  );e' => 100,
  );
  $form['number_9999999'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 9999999'),
    '#size' => 9999999,
  );
  $form['number_min_no_max'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 1 and #min to 1 - no #max set'),
    '#size' => 9999999,
    '#min' => 1,
  );
  $form['number_max_no_min'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 9999999 and #max to 5 - no #min set'),
    '#size' => 9999999,
    '#max' => 5,
  );
  $form['number_min_and_max'] = array(
    '#type' => 'number',
    '#title' => t('number with #size set to 9999999, #min to 1, and #max to 99 (2 digits max)'),
    '#default_value' => 11,
    '#size' => 9999999,
    '#min' => 1,
    '#max' => 20,
  );
  $form['number_min_and_max_no_size'] = array(
    '#type' => 'number',
    '#title' => t('number with #min set to 1, and #max to 12345 (5 digits max) - no #size set'),
    '#default_value' => 11111,
    '#min' => 1,
    '#max' => 12345,
  );

Screenshot of the result (:focus set intentionally via the browser inspector, to show that these are HTML5 number elements):

[klonos]

However, this is the wrong issue queue for that change. This issue should go to https://github.com/backdrop-ops/docs.backdropcms.org/issues

Yes, the fixing of the Form API documentation belongs in https://github.com/backdrop-ops/docs.backdropcms.org/issues, but coming up with a workaround belongs in core 😉

[indigoxela]

Which workaround?

ps: Size attribute for number input does work in Firefox.

[klonos]

Which workaround?

Still working on it and doing further research. Stay tuned 😉

ps: Size attribute for number input does work in Firefox.

Yeah, the screenshot I posted above was from Chrome on MacOS. Here's the same on Safari:

Currently I'm having having some weird issues with logging into my local Lando site from Firefox (this didn't help), so I trust you on that @indigoxela 👍🏼

[klonos]

PoC PR (I quickly whipped up variable names without much thought): backdrop/backdrop#3896

Things work as expected mostly, but this is WIP and there are assumptions being made and some logic tweaking that needs to happen, but I'd appreciate any feedback.

Tasks and things to research/test/consider:

• specifying '#min' also plays a part in the width calculation, but I have not taken that into account in the PR (see the focused item in the screenshot above)
• I need to find a way to test things in Firefox as well. If this is browser-/OS-specific, then how do we avoid "fixing" things in browsers that already work as expected?

[klonos]

ps: Size attribute for number input does work in Firefox.

• I need to find a way to test things in Firefox as well. ...

Confirmed 👍🏼 (using real OS/browser via BrowserStack - my actual local Firefox refuses to log me in 😠 ) ...this screenshot is without the CSS changes from my PR:

[klonos]

... If this is browser-/OS-specific, then how do we avoid "fixing" things in browsers that already work as expected?

I've added a commit that wraps the CCS workaround in @supports not (-moz-appearance: none), which works fine to exclude Firefox.

Stopping here, as I think we need to decide:

• #size for number inputs does not work as expected in Chrome/Safari. Do we fix this, or consider it a browser issue and leave it at that? If so, then do we document this in the Form API reference page, or not?
• Since #size is ignored by popular browsers (correctly, as this is in accordance with the spec), do we drop support for it for number inputs?
• We can work around the issue with #size with relatively simple combination of a custom inline style + use of CSS var() and calc(), which have very broad browser support. #maxlength on the other hand needs JS to be handled properly. What do we do with that then?

[indigoxela]

Food for thought: #maxlength is about strings, so IMO isn't appropriate for number input. I'm not sure if a workaround for that makes sense.

Re #size things seem a little trickier...
The official specs say it's not to be supported in number input.

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, size, src, and width.

The fact that Firefox did not support it in the past, but does now, might be a sign that this could change in the future (the Mozilla Foundation is an important member of WHATWG).

So for now, IMO we should remove both from the FAPI docs on number input, but wait with any workarounds until the currently (sort of) unclear situation gets clearer.

[bugfolder]

IMO we should remove both from the FAPI docs on number input

Since it is still supported on Firefox, rather than removing it entirely from the FAPI Reference, how about (for now) a note in the description that says it only has support on Firefox?

Having a visible note there, rather than it just vanishing, will also serve as a bit of a reminder to check later to see if the level of support has changed.

[bugfolder]

I've removed #max_length from the number form element in FAPI, and added a note about #size.