Epic: Update form components to leverage ElementInternals API

[jcfranco]

monday.com sync: #18048583564

Description

Lit is looking to add support for ElementInternals, so we should explore leveraging this API instead of our custom solution.

cc @eriklharper @benelan

Based on recent discussion, we'll use this issue to track just replacing the existing HiddenFormInputSlot implementation with ElementInternals without changing any existing public APIs. This will keep the refactor label consistent too since no functionality would change as a result.

Proposed Advantages

Improved form integration and leaner components.

Which Component

Checkbox, Combobox, Input Date Picker, Input Number, Input Text, Input Time Picker, Input Time Zone, Input, Meter, Radio Button, Rating, Segmented Control, Select, Slider, Switch, Text Area

Relevant Info

Safari added support for ElementInternals at 16.4, so we may have to consider the following if we update form components to use this API:

• waiting until Safari 18 to ensure last 2 base versions support this API
• consider a polyfill to handle Safari 16.0 – 16.3 (requires a lot testing)
• moving forward and document form integration won't work for 16.0 – 16.3 (nonstarter option as it introduces a regression for this version)

All components implementing FormComponent:

• autocomplete @jcfranco refactor(autocomplete): wire up useForm #14182
• checkbox @eriklharper refactor(checkbox): wire up useForm and ElementInternals #14052
• combobox @jcfranco refactor(combobox): wire up useForm #14056
• input-date-picker @jcfranco refactor(input-date-picker, input-number, input-time-picker): wire up useForm #14072
• input-number @jcfranco refactor(input-date-picker, input-number, input-time-picker): wire up useForm #14072
• input-text @eriklharper refactor(input-text): use ElementInternals #13985
• input-time-picker @jcfranco refactor(input-date-picker, input-number, input-time-picker): wire up useForm #14072
• input-time-zone @jcfranco refactor(input-time-zone): wire up useForm #14135
• input @jcfranco refactor(input): wire up useForm #14073
• meter @jcfranco no longer applicable
• radio-button @eriklharper refactor(radio-button): use ElementInternals #14142
• rating @jcfranco refactor(rating, slider, switch): wire up useForm #14069
• segmented-control @eriklharper refactor(segmented-control): use ElementInternals #14125
• select @eriklharper refactor(select): use ElementInternals #14066
• slider @jcfranco refactor(rating, slider, switch): wire up useForm #14069
• switch @jcfranco refactor(rating, slider, switch): wire up useForm #14069
• text-area @jcfranco refactor(text-area): wire up useForm #14074

Components that can be used to trigger form submit and reset events:

• action @eriklharper refactor(action, button): use ElementInternals #14015
• button @eriklharper refactor(action, button): use ElementInternals #14015

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Related issues

• calcite-input: input loses focus on every keypress when login info saved (safari) #5026
• Revisit form util to only have the topmost form owner handle all the form logic #4506
• Enhancement: controls, buttons, etc respect <fieldset disabled=""> #2838
• calcite-input: Form auto-fill/autocomplete does not work in all browsers #4078
• Calcite Input Validation - provide examples of how to do validation with Calcite form inputs #7249
• calcite-button#form where form is not submitted/reset when the buttons are mounted before the form #6751
• Focus required input like components on form submit #4681
• Calcite input validity, validationMessage, and willValidate properties #7413
• BUG-000167528 [calcite-input]: file type emits "Failed to set the 'value' property" error #9319 high support
• calcite-input-text doesn't show anything when pattern is not matched #11148