open dropdown when the user starts typing in input

[abenhamdine]

Hi,

we would want our users to be able to start typing in the input, and the dropdown would open and the user would continue to type in the search field (the previous keystrokes being reported in the search field).
It's the behaviour we had with a previous combobox component

Currently we have implemented this behaviour in a wrapper component as following (this is not the whole code of our wrapper component, only the related part) :

virtualSelect.addEventListener('keypress', this.onKeyPress)

onKeyPress: function (e) {
        var charTyped = String.fromCharCode(e.which)
        /*
		we restrict event to letters, numbers and some usuals caracters,
       in order to avoid to open dropdown on tab key for example
        */
        if (/[a-zA-Z\d -()]/i.test(charTyped)) {
            const isDropdownVisible = this.getIsDropdownVisible()
            if (!isDropdownVisible) {
                virtualSelect.open()
                const searchInput = this.getSearchInputElement()
                if (searchInput) {
                    searchInput.value = charTyped
                }
            }
        }
    },
 /**
 * Check if the dropdown is open, by checking visibility
*  There's no magic bullet in js to know if a element is visible, but rergarding virtualselect implementation
* we can confidently rely on opacity
*/
getIsDropdownVisible: function () {
        const dropdownContainerElement = this.getDropdownContainerElement()
        const computedStyle = dropdownContainerElement && window.getComputedStyle(dropdownContainerElement)
        return dropdownContainerElement && !dropdownContainerElement.hidden && computedStyle.opacity !== "0"
    },

 getDropdownContainerElement: function () {
        return document.querySelector('#__' + this.id + ' .vscomp-dropbox-container')
    },
 getSearchInputElement: function () {
        /*
		search input is not a child of select in the dom
thus we have to get its id to be able to select it
To do that, we get the id of another element, with class vscomp-ele-wrapper
From this element, we guess the id of search input element

Excerpt of html code : 
        <div id="vscomp-ele-wrapper-4485" class="vscomp-ele-wrapper vscomp-wrapper has-search-input popup-position-center has-value focused"
         tabindex="0" role="combobox" aria-haspopup="listbox" aria-controls="vscomp-dropbox-container-4485" aria-expanded="true" aria-label="Options list" data-tabindex-value="0" data-tabindex-counter="1" aria-activedescendant="">

       in this case search input will have l'id "vscomp-search-input-4485"
        */
        const wrapperElement = document.querySelector('#__' + this.id + ` .vscomp-ele-wrapper`)
        if (!wrapperElement) {
            console.error(`getDropdownContainerElement : impossible de trouver le wrapper element`)
        }
        const idParts = wrapperElement.id.split('-')
        const id = idParts[idParts.length - 1]
        return document.querySelector(`#vscomp-search-input-${id}`)
    },

It works fine, but as you can see, it's cumbersome and if the implementation of virtual-select change, it will break.
For this reason, I think it would be better to implement a built-in behaviour.

[sa-si-dev]

@abenhamdine does this input element is part of the drop-down element or a separate input field?

Can you share a video or screenshot to understand it better?

[abenhamdine]

@abenhamdine does this input element is part of the drop-down element or a separate input field ?

yes by input I mean the input element of virtual-select

[abenhamdine]

here's a video :

I start typing the letter "J" in the field named "Période début" and thanks to our implementation, the dropdown opens automatically and "J" is reported in the field search, and then I keep on typing :

01.09.2023_13.43.15_REC.mp4