[combobox]: allow formatting of textbox content

[palash2601]

--- edit by @tlouisse ---

after having spoken to @palash2601, the goal is to allow formatting of textbox content. One way to achieve this is to allow plotting an input inside (like lion-input) that already supports formatting. Another way is to add FormatMixin to LionCombobox

--- end edit ---

Expected behavior

Combobox should be rendered without any error when used with other lion components

Actual Behavior

When lion field is used in input slot of combobox element, below error is thrown

ChoiceGroupMixin.js:210 Uncaught TypeError: Cannot read property 'checked' of undefined
    at HTMLElement._throwWhenInvalidChildModelValue (ChoiceGroupMixin.js:210)
    at HTMLElement.addFormElement (ChoiceGroupMixin.js:173)
    at HTMLElement.addFormElement (ListboxMixin.js:366)
    at HTMLElement._onRequestToAddFormElement (FormRegistrarMixin.js:163)
    at HTMLElement.connectedCallback (FormRegisteringMixin.js:31)
    at HTMLElement.connectedCallback (FormControlMixin.js:216)
    at HTMLElement.connectedCallback (ValidateMixin.js:163)
    at HTMLElement.connectedCallback (FormatMixin.js:381)
    at HTMLElement.connectedCallback (FocusMixin.js:26)
    at HTMLElement.connectedCallback (InteractionStateMixin.js:106)

This error is not thrown when native input is used.

Using lion-input triggers the form-element registration cycle. Since Combobox element extends ListBoxMixin which extends ChoiceGroupMixin this error is thrown.

As per my understanding ChoiceGroupMixin expects all the child elements to have modelValue as Boolean value and having lion-input as child element here results in this error

https://webcomponents.dev/edit/1Xuf6Y72LFuP8kuovLOj

Additional context

Which component and version of it are you using.

@lion/combobox: 0.1.1

[tlouisse]

It was not designed with this use case in mind. Only fieldset and forms allow nesting form controls atm (and choice groups allow choice inputs, which are the options in this particular case).
For a11y you need the input element. Maybe there's other ways to add advanced behavior like formatters.
Could you make a feature request clearly describing the goals of this?

[tlouisse]

For this to work you would need:

• LionInput and input having same interface (I think they do, at least wrt 'value')
• a way to op-out form controls registering to parent

You could temporarily hack via:

<lion-combobox>
  <lion-input no-registration slot="input"></lion-input>
...
</lion-combobox>

addFormElement(child, ...args) {
   if (child.hasAttribute('no-registration')) {
     return;
   }
   super.addFormElement(child, ...args);
   // etc...
}

Question still remains whether having a native input that is not a direct child is a problem for screenreaders. If not, we would have to make _inputNode point to lion-input._inputNode

[tlouisse]

Desired functionality (formatting etc., which you would get when using a lion-input inside) could be achieved by adding FormatMixin on top of LionCombobox. This issue could be moved to Discussions as a Feature request...