Duplicate of Story. 49.1 Updated Dropdown Enhancements

General Info

We want to optimize the dropdowns on the Sell Your Bag form for faster and clearer selection. The improvements will:

• Enable search-as-you-type with substring matching, not limited to the first word.

• Bold only the typed letters within matching options (e.g., typing “han” highlights only han in Timeless Handle).

• Order entries by brand-specific options first, then general options, and always leave Other at the bottom.

• Introduce visual separation in dropdowns: clearly distinguishing brand-specific colors/materials/hardware from general ones.

• Ensure backend management for brand-specific entries in WordPress.

• Ensure translations are aligned with Airtable (submissions saved in English only).

Functional Details

Dropdown Interaction

• User taps a dropdown → list expands inline below input.

• At the top, a search bar appears (keyboard opens only when typing).

• Options filter instantly as the user types.

• Matching letters are bolded in each result.

• Substring matching: user input matches any part of the option text (e.g., handle matches Timeless Handle).

• Selecting an option closes the dropdown and populates the input field.

Option Ordering

• Brand-specific entries always appear first.

• After that, general entries (alphabetical order).

• Other is always at the very bottom.

• Remove the “I don’t know” option.

Brand-Specific vs General Separation

• Dropdown menu sections should have headers (non-selectable, styled differently, bold or with divider):

  • For colors → “Chanel Colors” or “Hermès Colors”, followed by their specific options.

  • Then a header “General Colors” → followed by standard list (e.g., Yellow, Green, Black).

• Same logic applies to Main Material and Hardware.

• Main Material: keep the dropdown but extend it to support brand-specific materials.

• Hardware: create a new dropdown with Brand Hardware → brand finishes (e.g., Palladium, Gold Tone, Ruthenium) → General Hardware → Other.

No Match Behavior

• If no options match the search input → only show Other.

• Other should always remain visible.

Backend Notes

• WordPress backend must allow adding:

  • Brand-specific Colors

  • Brand-specific Materials (for Main Material)

  • Brand-specific Hardware finishes

• Existing price calculator is linked to the Model, not the Material — confirmed as already working. (Note for Alexander: double-check the calculator just to be sure.)

• Ensure brand-specific entries can be tagged in the backend, so dropdowns can group and display them automatically.

Translation Notes

• In Airtable, ensure that only the English version of the selected value is stored, regardless of frontend translation.

• Translation handling must apply to dropdown headers (Chanel Colors, General Colors) and option values.

User Story

As a seller,

I want dropdowns that filter instantly and highlight matches across full words,

So that I can quickly find options even if I only remember part of the name, and clearly distinguish brand-specific from general options.

Flow Overview

1. Tap dropdown field → list expands inline with search box on top.

2. Type search query → options filter instantly with substring match.

3. Matching letters bolded only where typed.

4. Options ordered: brand-specific section → general section → Other at bottom.

5. Select option → dropdown closes, input populated.

6. If no match → only “Other” visible.

Acceptance Criteria