Interact with none-trivial elements.

[Ruediger Seiffert]

As a “complete beginner” with WebMCP, my first question is:

I have a web application that uses Angular and PrimeNG. I have a so-called p-autocomplete element. AutoComplete is an input component that provides real-time suggestions when typing. The user MUST select one of the suggestions. The selected suggestion then contains an object. (Take a look at the attached video, it makes it clearer).

I have described the corresponding inputs declaratively. However, WebMCP is not able to mimic the above procedure. It should proceed as follows:

• Type the first letter in the field
• Select from the suggestions

Instead, WebMCP writes the complete name in the field without selecting anything afterwards.

How can I solve such problems?

[François Beaufort]

Hey Ruediger,

Do you use the imperative or declarative API in this case?
Can you share a bit of your code?

--
You received this message because you are subscribed to the Google Groups "Chrome Built-in AI Early Preview Program Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chrome-ai-dev-previe...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/chrome-ai-dev-preview-discuss/637a7dcc-4a39-41ca-9cc4-a3b9ada9d631n%40chromium.org.

[François Beaufort]

If you use declarative, could you listen to the form submit event and trigger the javascript function that would select from the current selection?

form.setAttribute("novalidate", "");
form.addEventListener("submit", function (e) {
  e.preventDefault();
  // TODO: Update p-autocomplete element
  // TODO: Perform form validation
});

[Ruediger Seiffert]

Hi François, 
I am using the declarative API. Here is an example of the mentioned p-autocomplete element:
```
 <p-autoComplete
            toolparamtitle="Origin Locations"
            toolparamdescription="Start location of the flight. Insert the airport code or city name."
            name="selectedOriginLocation"
            inputId="from_airports"
            [multiple]="false"
            [minQueryLength]="2"
            [autoHighlight]="true"
            fluid
            [(ngModel)]="selectedOriginLocation"
            [suggestions]="originLocationOptions"
            (completeMethod)="onFilter($event, 'origin')"
            [forceSelection]="false"
            optionLabel="name"
            placeholder="{{ 'amadeus.from' | translate }}"
            [showClear]="true">
</p-autoComplete>
```

[François Beaufort]

Oh I get it now :)
<p-autoComplete> is a form-associated custom element that isn't yet supported in this early implementation of WebMCP in Chrome.

Until https://chromium-review.googlesource.com/c/chromium/src/+/7566769 is merged into Chrome, you'll have to use the imperative API.

[François Beaufort]

FYI I've just filed https://github.com/webmachinelearning/webmcp/issues/94 

[François Beaufort]

Hey Ruediger,

Good news! The latest Chrome Canary now has basic support for WebMCP form-associated custom elements: https://chromiumdash.appspot.com/commit/c1f726b3787be0744e6bf10c4e9ba1fdd85ebc43