Validation not triggered when adding Paste Combobox component marked as required for twilio-webchat-react-app

[sakukreti]

Hi team, a customer of mine is migrating their webchat to use conversations (using this repo as base) and in the pre-engagement form they added a Twilio Paste Combobox component marked as required but the validation is not shown. For the name and the email they are using an Input component and the validation is triggered if the fields are empty but not with the Combobox. Any ideas on this?

[TheSisb]

Hey @sakukreti,

I threw together a quick Codesandbox based on your code in Slack.
I am able to reproduce what you've described. The input boxes get browser validation but Combobox does not. I believe this is intended, since the Combobox is a complex interaction; while it may use an HTML input under the hood, it has different behavior that don't necessarily map to browser validation.

You may want to build your own field validation and use the HelpText component to display different error messages. We have some notes on how to manage validation on our docs.

[sakukreti]

Thanks @TheSisb the customer wen through the documentation but unfortunately it does not directly help them in how to validate the combobox value or how to hook a custom validation into the form validation from
as="form"
But as we understood there is no such feature for the combobox in Twilio-Paste yet, they will try to build an own validation on submission now. They have requested this as a feature request though.

[TheSisb]

Hi @sakukreti,

Many Paste consumers use different form libraries which help to manage validation. Different products handle validation in different ways, so Paste tries not to interfere with what they're doing. Instead, we only focus on the presentation aspect so that it's easy to integrate Paste with different solutions.

I would suggest to your customers to use https://react-hook-form.com/ for better control over validation with Paste.