Get Combobox Filter Value

[MatthewRantala1]

Hi, I am trying to create a combobox that has an autocomplete function.

As the user types an address, I want to update the combobox items to show the first 25 matches. I have it working except for the fact that I can not just grab what the user has typed into the combobox--I've got a mess of keydown/keyup events that I'm trying to guess what they've typed but it's flaky and it would be so much easier if I could just do something like: document.getElementById("userTyopedAddress").filterValue.

Am I missing something obvious? I did see this closed feature request on github that looks like what I'm looking for: View ComboBox Filter Value · Issue #6866 · Esri/calcite-components · GitHub

Thanks for any suggestions!

[KittyHurley]

Hello @MatthewRantala1 would the Filter component fit the use case?

There is a Filter recent earthquakes tutorial available, which showcases some of the component's functionality, including gathering the "filteredItems" from the value.

Here's a small sample in Codepen of an implementation with Calcite's Filter component.

[MatthewRantala1]

Thank you, @KittyHurley  I did look at that example and did pull some of my code from there, I think.  The reason I wanted to use a combobox is because I'm thinking that just a list of addresses would be more compact than using cards, especially on a phone. It's going to be embedded in an iFrame of another page so space was already an issue.

This is the prototype that I'm working on: Broadband Efforts - Carver County - CarverLink.

Hope things are going well for you @esri, I'm sure MnIT/DNR misses you! What the WHAF?! 🙂

[KittyHurley]

Ah, got it. Appreciate the additional context and prototype sample. Can understand the difficulty without the context of a filter value.

Calcite recently received an enhancement request last week with the same request: https://github.com/Esri/calcite-components/issues/7212. There isn't a targeted timeline for implementation just yet, but progress can be tracked via GitHub. 

In the interim, there is a JS Maps SDK widget, search, perhaps a workaround in the meantime?

[MatthewRantala1 · Accepted solution]

What I ended up doing is pulling the value from the shadowRoot. Had tried to do that before posting but didn't get it to work (first attempt at accessing shadowRoot) but the issue link you posted had enough of the syntax stubbed out that I was able to figure out syntax that worked for me:

const addressCombobox = document.getElementById('address-select');
addressCombobox.shadowRoot.querySelectorAll(".input")[0].value;

Thanks!