AddressNL validation on city & postcode issues #4699
Comments
LaurensBurger
added
bug
triage
|
Note: the SDK hasn't been updated yet, only the backend aspect has been "finished" so far (there's a notice in the changelog for this). |
|
Refinement: Circling back next week to see if SDK solves things. |
|
@LaurensBurger an you retest this on our test environment again? |
|
2.8.1 With validation (regex) set the whole component will "trigger" after loading. This keeps happening even when removing the validation The component does not show when it's made visible with simpel logic. It does hide with the same logic reversed. cannot continue a form when addressNL is not filled in, even when not required: "Stad" should be "Plaats" of "Woonplaats"(?) |
|
We know this component needs more work. We're not picking this up now explicitely but in a larger adressnl ticket #4431 |
sergei-maertens
removed
the
triage
|
Ive summarized the issues into two lists: Straight forward:
Bit more complicated:
Notice!
|
|
@robinmolen can you group these tasks into things that should be straight forward, and tasks that may be complicated because of the formio.js renderer + React setup? You will have to explore some code for this :) |
…when not hidden The AddressNL component should only be rendered when it's not hidden. Otherwise, the attach function will call `createRoot` with an argument that isn't a DOM element. So the creating of the root and, therefor, the rendering of the React component cannot be done. If the reactRoot doesn't exist, then it also doesn't (and cannot) be unmounted. So this is also something that shouldn't happen when the component is hidden. This works fine when the component is hidden/shown using form logic, as the `hidden` property will be updated.
…when not hidden The AddressNL component should only be rendered when it's not hidden. Otherwise, the attach function will call `createRoot` with an argument that isn't a DOM element. So the creating of the root and, therefor, the rendering of the React component cannot be done. If the reactRoot doesn't exist, then it also doesn't (and cannot) be unmounted. So this is also something that shouldn't happen when the component is hidden. This works fine when the component is hidden/shown using form logic, as the `hidden` property will be updated.
When the addressNL component is optional, the postcode and houseNumber fields should also be considered optional. But, if either postcode or houseNumber is provided, both fields become required
…er dirty To trigger the validation once the addressNL component has changed, we have to monitor formik changes. Using the `dirty` property from the `useFormikContext` we can simplify this monitoring. Unfortunately we can only set/alter the validation on the top level. With this we have three options: - We can add `onBlur` properties to all addressNL fields. This means that we can handle formValidation after blur, and only when `dirty === true`. This would add a lot of custom properties and logic, for a small 'problem'. This would also move us futher from a "the component functions on its own" way of working. - We can add `onBlur` eventListeners via `useEffect`. This would give us the same functionality as the previous option, without all the custom properties. It would also make the addressNL component even more complex and introduce unexpected behavior. - Finally we can change the validation rule based on the `dirty` property. For this to work, we would have to pass the `dirty` prop to the parent component, to then change the validation rule. It is a strange way to work, but would mean the least amount of custom behavior and keep the validation process understandable. For simplicity sake, I've chosen the last option. To use the `dirty` prop from the formik context to change the addressNL component validation
Product versie / Product version
2.8.0
Customer reference
No response
Omschrijf het probleem / Describe the bug
The custom error mesaage is not displayed
The position of the postcode error is "wrong"
Validation triggers on "change" so any interaction with the component
Validation of City / Postcode only occurs on submit (back-end), which seems odd compared to any other component in OF.
Validation of City / Postcode does not scroll/focus the browser to the component - but the "required" validation does.
The text was updated successfully, but these errors were encountered: