Input is editable on mobile when single item is already selected

[FluffyDiscord]

Hi, user is able, presumably, to search even when he should not be able to, because he already has preselected option.

This happens only on mobile phones (chrome tested) - you need to use your phone as this is not an issue on desktop.

Snippet

    const parent = selectElement.parentElement as HTMLSvelteSelect
    parent.classList.add('svelte-select-initialized')

    const selectOptions = [...selectElement.options]
    const options = []
    const selected = []
    selectOptions.forEach(option => {
        if(option.value === '' || option.disabled === true) {
            return
        }
        
        const opt = {
            id: option.value,
            name: option.innerText
        }
        options.push(opt)

        if(option.selected || opt.id == selectElement.value) {
            selected.push(opt)
        }
    })

    parent.svelte = new Svelecte({
        target: parent,
        anchor: selectElement,
        props: {
            options: options,
            value: selectElement.multiple ? selected : (selected[0] ?? null),
            valueField: 'id',
            labelField: 'name',
            valueAsObject: true,
            virtualList: true,
            name: selectElement.getAttribute('name'),
            multiple: false,
            ...props,
        }
    })

    selectElement.remove()

    return parent

Screen how it looks

Svelecte: 3.7.7 or 3.9.2

[mskocik]

I see, although I wasn't able to reproduce it myself so visibly. Is this issue looking for you also on svelecte documentation page?

[FluffyDiscord]

yes, in the Basic Usage example, I am allowed to write, tho theres fixed input width, so it does not show

[FluffyDiscord]

[mskocik]

@FluffyDiscord let me know if it's fixed for you.

[FluffyDiscord]

@FluffyDiscord let me know if it's fixed for you.

Unfortunately it's still not fixed. Maybe disabling the input would do (or preventing on:input ?) if it's single select and it's already selected?

[mskocik]

Can you provide replicable issue in svelte REPL? Would be much easier to fix. I can't reproduce it on my android phone now.

Disabling input is not good, because it would prevent clearing selected item on backspace.

On 14. 9. 2022 8:37, Mossshine wrote:

@FluffyDiscord <https://github.com/FluffyDiscord> let me know if
it's fixed for you.

Unfortunately it's still not fixed. Maybe disabling the input would do (or preventing on:input ?) if it's single select and it's already selected?

— Reply to this email directly, view it on GitHub https://github.com/mskocik/svelecte/issues/119#issuecomment-1246308729, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGCU5FDPNL4F3743LUGJ3LDV6FXBXANCNFSM6AAAAAAQCDWWXU. You are receiving this because you modified the open/close state.Message ID: @.***>

[FluffyDiscord]

Can you provide replicable issue in svelte REPL? Would be much easier to fix. I can't reproduce it on my android phone now. Disabling input is not good, because it would prevent clearing selected item on backspace. … On 14. 9. 2022 8:37, Mossshine wrote: @FluffyDiscord https://github.com/FluffyDiscord let me know if it's fixed for you. Unfortunately it's still not fixed. Maybe disabling the input would do (or preventing on:input ?) if it's single select and it's already selected? — Reply to this email directly, view it on GitHub <#119 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGCU5FDPNL4F3743LUGJ3LDV6FXBXANCNFSM6AAAAAAQCDWWXU. You are receiving this because you modified the open/close state.Message ID: @.***>

The issue is present in the svelecte docs on the first example Basic Usage and should be visible for every(?) android device.

Issue should be in all chromium browsers and webkit browsers, see this bug report from 10 years ago https://bugs.chromium.org/p/chromium/issues/detail?id=118639

The keyup and keydown key code is "Unidentified" https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229 which messes up with your "switch" in keydown handler

[mskocik]

Issue is somewhat present in the docs. I can see on my device, that I am getting word suggestions, but nothing is being typed or shown.

The problem is that onKeyDown handler should handle this case (item selected for single select) in default case correctly:

https://github.com/mskocik/svelecte/blob/e49735e923941383aaaed1a8ab0b9bf8f5df6604/src/Svelecte.svelte#L597-L601

And I not even mentioning not respecting the maxlength attribute.

[FluffyDiscord]

Issue is somewhat present in the docs. I can see on my device, that I am getting word suggestions, but nothing is being typed or shown.

The problem is that onKeyDown handler should handle this case (item selected for single select) in default case correctly:

https://github.com/mskocik/svelecte/blob/e49735e923941383aaaed1a8ab0b9bf8f5df6604/src/Svelecte.svelte#L597-L601

And I not even mentioning not respecting the maxlength attribute.

You can't see things you type because the input width is 2px, this issue is as old as this library is, but it's easily fixable from outside (css overwrite thr .inputBox class if i remember correctly) so I didn't report it. Try removing the fixed width for debug purposes.

I have also noticed that "preventDefault" does not seem to work on mobile on keydown and keyup, probably linked to the chromium bug

[turkic-dev]

Hey I have this problem in all browsers. Can you help me?I can only create one. Others are not visible at all.

<script>
	import Svelecte from 'svelecte';
	const list = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2'}];

</script>

<Svelecte options={list} multiple creatable={true} clearable={true} searchable={true}></Svelecte>

[mskocik]

@turkic-dev your comment isn't clear. And you posted it 2 different issues. So I have no idea what are you trying to say.

[turkic-dev]

@mskocik Sorry, I'm creating a createable field but there are two problems.

1. If you don't create any option in the first selection, you can never write.

Example: First select "Item 1" option then when it tries to create a new option it never writes

2. I can't create multiple options

[mskocik]

Okay, I understand now. It's fixed that in 3.9.8 version. There was a bug introduced in attempt to fix this issue.

[turkic-dev]

@mskocik Oh yes it works now. Thank you so much.

[FluffyDiscord]

@mskocik the "keydown" could be replaced with beforeinput on mobile devices. Is does not show the actual key (neither does thr keydown event, tho), but you could kind of check the content being written and if it would be an actual string, preventDefault it.

[mskocik]

@FluffyDiscord your suggestion wouldn't work, because beforeinput runs after keydown.

What I found is that android chrome ignores preventDefault() call on every event (keydown, beforeinput, input, keyup)... At least I fixed "enter" behavior on android as well.