cem-autocomplete features

[sashafirsov]

cem-autocomplete, custom-element Material

cem-autocomplete is an input field with associated data list shown as dropdown on focus and filtered by text dynamically while typing.
The behavior and appearance is following the datalist element.

Unlike native datalist, the cem-autocomplete allows custom DOM for input field and list items.

Features

value property and attribute

updated synchronously with input. When the text of input matches the item text, the value is taken from value property of item.

Q. Would value be set to partial text or closest/autoselected list item one?

change event

emitted on change event by input field.

slot="input" defines input filed with value property and emits type and change events

By default it is a <input type="search">

slot="" defines the list of suggested values

data or time are sugessted elements to hold the value.

See also

cem-select

[sashafirsov]

Implementation notes

To support focus-able list items implementation can wrap each item into:

• own element with tabindex
• <a>...</a> link element
• <data> or <time> element
• <button value='...'>...</button> link element
• <label><input type="radio" value="..."/>...</label>
  The link and radio are giving the native focus and screen reader capabilities which for own/data/time element wrapper have to be implemented manually.

Link does not have a value native support and needs extra care of CSS styling for decorator and colors. The data or time within can add the value support though. Propagation of value still would be manual.

label+radio in the same time given ability to use native support as for accessible features as for value propagation.

The use of same name on input and radio would give ability to be picked by the form without any code. In same time it would eliminate the need for synthetic input field on CEM level - internal content would be used as is.

    <form id="myform" onsubmit="alert( (new FormData(myform)).get('pick') )">
        <input name="pick"/>
        <label><input type="radio" value="apple" name="pick">🍎</label>
        <label><input type="radio" value="pear" name="pick">🍐</label>
        <button type="submit" >Submit</button>
    </form>

In example ^^ the pick form field matches the input value. Propagation from radio remains on cem-autocomplete.

[sashafirsov]

list handling

The list needs own container in order to be popover. FORM as container would give ability to trigger change event natively and propagate the radio selection into input without extra code by selection slot. The dropdown FORM wich resides within of input owner FORM is illegal HTML construct and nested form would not be inserted into DOM.

Hence insteaf of form change, the radio handler should trigger the input propagation.

Radio would select only one from group if the group has same name. Using generated name would introduce an extra field in the owner FORM which is not unwanted effect. By using same name as input field, this effect would be eliminated.

How to handle the radio name if none is assigned to INPUT?

The generated name would work for single selection, but would have a side effect of introduced value on the container FORM. To avoid such side effect the form attribute on radio with generated ID would point to non-existing FORM, excluding it from container FORM.

FIELDSET also able to receive change event and propagate it to the INPUT. Prototype:

    <form id="myform" onsubmit="event.preventDefault(); console.log( myform.pick[0].value )">
        <input name="pick"/>
        <fieldset form="fakeorm" onchange="console.log( myform.pick[0].value = event.target.value )">
            <label><input type="radio" value="apple" name="pick">🍎</label>
            <label><input type="radio" value="pear" name="pick">🍐</label>
        </fieldset>
        <button type="submit" >Submit</button>
    </form>