corejavascript/typeahead.js

Firefox is broken, Chrome and Edge works fine.

Open

#257 opened on Feb 23, 2024

View on GitHub
 (2 comments) (7 reactions) (0 assignees)JavaScript (956 stars) (232 forks)batch import
bughelp wanted

Description

Edge: image

Firefox: image

min-width workaround just for firefox.

.search-box-menu{
    width: 100%;
    min-width: 18.75rem !important;
}

Our typeahead initialization:https://github.com/JJConsulting/JJMasterData/blob/main/src/Web/Scripts/SearchBoxListener.ts

If you want to repro, create a SearchBox in a form at https://www.github.com/jjconsulting/jjmasterdata

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Investigate the CSS issue in Firefox where the search box menu width doesn't render correctly without a min width. Apply the suggested workaround (add min width: 18.75rem !important to .search box menu) and verify it fixes the layout in Firefox without breaking Chrome and Edge. Ensure the change is consistent with the library's existing CSS and consider any potential accessibility or responsiveness impacts.