Fix item select (MarketTypeInput / SelectInput) not working correctly #24

Open
opened 2026-07-09 19:19:04 +02:00 by Sirttas · 0 comments
Owner

Summary

The item autocomplete (src/market/type/MarketTypeInput.vue) doesn't behave correctly when there's exactly one match, and Enter doesn't replace an already-selected value.

Scope

  • MarketTypeInput.vue: the suggestion dropdown only renders when suggestions.length > 1:

    <div v-if="suggestions.length > 1" ...>
    

    A search that resolves to exactly one match renders nothing and can't be picked. Change the
    condition to suggestions.length > 0 (analogous to SelectInput.vue's v-if="isOpen && items.length").

    This is also the root cause of "pasting an exact item name and pressing Enter appears to do
    nothing" — pasting a full, exact name narrows the search to exactly one match, which the
    > 1 check was hiding. There is no separate async/race bug here; confirmed the dropdown
    renders correctly for any paste that produces more than one match.

  • MarketTypeInput.vue submit(): Enter's fallback auto-select only fires when
    modelValue.value === undefined:

    } else if (modelValue.value === undefined && suggestions.value.length > 0) {
        select(suggestions.value[0]);
    

    So if a value is already selected and the user pastes new text (replacing the selection)
    then presses Enter, nothing happens — the guard blocks it. Remove the
    modelValue.value === undefined condition so Enter's fallback is: prefer the hovered item
    (currentIndex >= 0) if there is one, else auto-select the first current suggestion,
    regardless of whether a value was already selected.

    Note for implementation: try both behaviors and compare — (a) always auto-select the
    first suggestion when nothing is hovered (recommended), vs (b) keep the old guard requiring
    the field to be cleared before Enter will replace an existing selection. Pick whichever feels
    right in practice.

  • SelectInput.vue submit() has the identical guard (modelValue.value === undefined at
    line 40). Apply the same fix there for consistency, since it's the generic version of the
    same component.

Out of scope

  • The MarketTypeInputSelectInput refactor (fixed standalone here instead).

Acceptance criteria

  • A search (typed or pasted) with a single match shows the suggestion and can be selected.
  • Pasting text that replaces an already-selected value, then pressing Enter, selects the
    hovered item if any, else the first current suggestion.
  • Selecting via click and via keyboard (Enter, arrow keys) both work, in both
    MarketTypeInput and SelectInput.
  • npm run build passes.

Related

  • May later be folded into the MarketTypeInputSelectInput refactor.
## Summary The item autocomplete (`src/market/type/MarketTypeInput.vue`) doesn't behave correctly when there's exactly one match, and Enter doesn't replace an already-selected value. ## Scope - `MarketTypeInput.vue`: the suggestion dropdown only renders when `suggestions.length > 1`: ``` <div v-if="suggestions.length > 1" ...> ``` A search that resolves to exactly one match renders nothing and can't be picked. Change the condition to `suggestions.length > 0` (analogous to `SelectInput.vue`'s `v-if="isOpen && items.length"`). This is also the root cause of "pasting an exact item name and pressing Enter appears to do nothing" — pasting a full, exact name narrows the search to exactly one match, which the `> 1` check was hiding. There is no separate async/race bug here; confirmed the dropdown renders correctly for any paste that produces more than one match. - `MarketTypeInput.vue` `submit()`: Enter's fallback auto-select only fires when `modelValue.value === undefined`: ```js } else if (modelValue.value === undefined && suggestions.value.length > 0) { select(suggestions.value[0]); ``` So if a value is already selected and the user pastes new text (replacing the selection) then presses Enter, nothing happens — the guard blocks it. Remove the `modelValue.value === undefined` condition so Enter's fallback is: prefer the hovered item (`currentIndex >= 0`) if there is one, else auto-select the first current suggestion, regardless of whether a value was already selected. **Note for implementation:** try both behaviors and compare — (a) always auto-select the first suggestion when nothing is hovered (recommended), vs (b) keep the old guard requiring the field to be cleared before Enter will replace an existing selection. Pick whichever feels right in practice. - `SelectInput.vue` `submit()` has the identical guard (`modelValue.value === undefined` at line 40). Apply the same fix there for consistency, since it's the generic version of the same component. ## Out of scope - The `MarketTypeInput` → `SelectInput` refactor (fixed standalone here instead). ## Acceptance criteria - [ ] A search (typed or pasted) with a single match shows the suggestion and can be selected. - [ ] Pasting text that replaces an already-selected value, then pressing Enter, selects the hovered item if any, else the first current suggestion. - [ ] Selecting via click and via keyboard (Enter, arrow keys) both work, in both `MarketTypeInput` and `SelectInput`. - [ ] `npm run build` passes. ## Related - May later be folded into the `MarketTypeInput` → `SelectInput` refactor.
Sirttas added the
Status
To Refine
label 2026-07-09 19:30:18 +02:00
Sirttas changed title from Fix item select (MarketTypeInput) not working correctly to Fix item select (MarketTypeInput / SelectInput) not working correctly 2026-07-29 20:28:37 +02:00
Sirttas added Kind/Bug and removed
Status
To Refine
labels 2026-07-29 20:28:43 +02:00
Sirttas added the
Priority
Medium
3
label 2026-07-29 20:31:51 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: eveal/gemory#24