Change Text Field spellcheck rights and wrongs

The Text Field component includes a spellcheck option. I'd like to know if it's possible to customize the validation criteria by modifying or replacing the list of correct and incorrect words used for the red underline. For instance, if a user types any word that is not in ['start', 'end'], it should be marked as incorrect.

No, the spellcheck option is an instruction to the browser to do a standard spellcheck using the browser locale to establish the language.

If you examine the component using your browser's development tools you'll notice the `spellcheck = "true" directive.

<input class="ia_inputField text-field popup-not-draggable" type="text" data-component="ia.input.text-field" data-component-path="C.0:53" placeholder="" spellcheck="true" value="" style="position: absolute; left: 808px; top: 561px; width: 150px; height: 32px;" data-dashlane-rid="9f697aeca88c3c34" data-dashlane-classification="other">

For your requirement you would have to write code, but it seems like a perfect application for a dropdown or even a radio group.

Oh okay... I want to use it to check if a string of a formula is correctly built (only allow +, -, *, /, functions, variables...), so I'll have to find another way.

In 8.3, the form component will allow you to provide a pattern input that will be validated on the frontend, much like the spellcheck attribute works:

Until then, I'm not aware of any existing/available Perspective component that offers this functionality, though it might be possible in some way with one of @bmusson's modules?

2 Likes

Possible? - Yes
Sane? - No

5 Likes

Thanks! I can definitely wait until then :grinning_face:

Actually, there’s now a sane way to add the pattern property in Periscope.

With the events.target.lifecycle.onMount callback of the Portal component, you’re given a reference to the target DOM element, on which you can set the pattern property.

1 Like