Overview
If you input any numeric value into field in the contextual settings panel, when it tries to update the component display, it will cause a property validation failure because it interprets the value as an integer instead of a string:
Drupal\Core\Render\Component\Exception\InvalidComponentException: [cta1] Integer value found, but a string or an object is required in Drupal\Core\Theme\Component\ComponentValidator->validateProps() (line 203 of core/lib/Drupal/Core/Theme/Component/ComponentValidator.php).
Any changes to the form will be lost.

Proposed resolution
User interface changes
| Comment | File | Size | Author |
|---|---|---|---|
| #15 | select.gif | 181.18 KB | hooroomoo |
| numeric-field-input.gif | 388.78 KB | traviscarden |
Issue fork experience_builder-3473702
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3473702-numbers-spaces
changes, plain diff MR !301
Comments
Comment #2
wim leersWe know. See #3463842: [META] Redux sync on ALL prop types, not just ones with a single [value] property.
Comment #5
bnjmnmThere was a utility function that would send everything through
Number()that didn't result inNaN- so things like spaces or strings that included only numerals would get changed to numbers.The fix is the same for this and #3473704: Space press in empty component props field inserts `0` so I just added a test that covers what the other issue reported.
Comment #6
bnjmnmComment #7
traviscarden commentedThanks, @bnjmnm. That fixes the bug in question in my local testing. Moving to "Needs work" though, since the tests are failing.
Comment #8
shyam_bhattComment #9
shyam_bhattComment #10
bnjmnmYikes, the random test failures in components-slots.cy.js are back with a vengance despite the changes in this issue having no impact on it whatsoever. I'll likely try a few things in this MR since it seems like the starts aligned to make the random fails happen pretty reliably here
Comment #11
bnjmnmLets keep the
components-slots.cy.jsfixes in there if we can even if it is technically out of scope - it'll make life easier for everyone.Comment #12
kristen polI assume this is related:
#3472176: String props that are integer values aren't treated as strings
Comment #13
traviscarden commentedYes. That issue has been marked as a duplicate of this one.
I've manually tested again and confirmed that, of course, it still works. A quick review of the JS code (not my area of expertise) should wrap this up.
Comment #14
wim leersNeeds @hooroomoo's (or @effulgentsia's) approval on the MR before this can be merged, but LGTM!
(Just one nit/suggestion, not commit-blocking.)
Comment #15
hooroomooFound a regression where it breaks the select element. Could be worth adding a test for that too.
Comment #16
hooroomooComment #17
bnjmnmIt looks like this specifically breaks select elements with
type: integerand wasn't caught e2e because the only select elements with tests right now are string based. This issue makes sense as the cast-to-number is currently specific to numeric inputs. This logic will need to be expanded to check data type, and we should add an integer select to the sdc_test_all_props component.Comment #18
wim leersAt least this part is Novice and is a great contribution for DrupalCon Barcelona!
Dear Barcelona code sprint participant: see
/tests/modules/sdc_test_all_props/components/all-props/all-props.component.yml. SeeWhat @bnjmnm identified is that we should have a similar SDC prop for integers:
type: integerandenum: ….Comment #19
wim leersRelated: over at #3467870: Support `{type: array, …}` prop shapes, I've had to add:
Comment #21
jessebaker commentedIn an attempt to push this issue along, I went ahead and added the test described by @bnjmnm in #17. Unfortunately this appears to have highlighted a further problem. Or perhaps this is actually the symptom of the problem @bnjmnm is referring to in that comment.
When props that are NOT the new Integer Enum (select) field are updated, the value of the Integer select field is NOT sent to the back end.
IOW the initial value of the select does not appear to be correctly updated in the redux store when loading the form for the first time.
Comment #22
bnjmnmThis is addressed much more easily with the schemas fully available which is happening in #3474732: Premature prop validation can break the UI, so I addressed the reported issue there + included tests to verify it is fixed. Get that one reviewed/codeowner signed and the symptoms reported here are fixed in a less hacky way than what can currently be done off 0.x