VBCS Oracle Combo box - Free Text Validation For Options

Combo Box Free Text Validation

A Combobox one is a dropdown list that supports single selection, text input, and search filtering.
Choose a value from the drop down list or enter a new value in the input field.
Demo of Valid Value Validation using ValueChange Event in Combo box  

Default Behavior of combobox on selection with valid value on selection of value from List 

Check the Label & Value below the Submit button on Entering FreeText

 Error we Face is on "Entering Free Text" then value updates as Free Text not the Value

Solution

On ValueChange Event has detail attribute when value entered as free text 

If we see detail then show Error message and update rawValue as empty string and Value as Undefined

If we see data then it is valid, updates the Label and Value correctly.

Code

Combo box

<oj-combobox-one id="movie" slot="value" class="oj-form-control-full-width"

    raw-value="{{$variables.searchValObj.movieRaw}}" value="{{$variables.searchValObj.movieValue}}"

    user-assistance-density="compact" options="[[$variables.getMoviesListSDP]]" options-keys.value="code"

    options-keys.label="title" placeholder="Please Enter Movie Name"

    on-value-changed="[[$listeners.movieValue]]" messages-custom="[[$page.variables.searchValObj.movieMsg]]">

</oj-combobox-one>

Value Change Event - Action chain

console.log("Value Change EvENt", $page.variables.searchValObj.movieRaw, $page.variables.searchValObj.movieValue);

      console.log("From Current", event);

      if ("data" in event.detail) {

        $page.variables.searchValObj.movieMsg = [];

        console.log("LABEL :", event.detail.data.label);

      } else {

        console.log("Wrong Value", event.detail, $page.variables.searchValObj.movieRaw, $page.variables.searchValObj.movieValue);

        $page.variables.searchValObj.movieValue = undefined;

        $page.variables.searchValObj.movieRaw = '';

        $page.variables.searchValObj.movieMsg = [{

          detail: "Please Select Matching Movie Name from the List.",

          summary: "",

          severity: "error",

        }];

        await Actions.callComponentMethod(context, {

          selector: '#movie',

          method: 'focus',

        });

        await Actions.callComponentMethod(context, {

          selector: '#movie',

          method: 'showMessages',

        });

      }