Defect #44347
closed
Filter/query text input fields lose border and background (unscoped CSS injected by modal-issue feature)
Description
On the issue list "Filter" panel (and any other page with a plain <input type="text">, type="date", type="password", type="search" or type="number" element), the input has no visible border and no visible background. The typed value looks like plain floating text, so it is very hard to tell it is an editable field at all. Reproduced in Chrome, Firefox and Edge, so this is a CSS problem, not a browser rendering difference.
Dropdown/select filter fields (e.g. the operator selects) are not affected and render normally.
Steps to reproduce¶
- Open any issue list, e.g. /projects/<project>/issues.
- Expand the "Filter" panel if it is collapsed.
- Add a filter that uses a free-text value field, e.g. "Ticket" (issue id) with operator "is", or any text custom field with operator "contains".
- Type a value into the text field.
Expected behavior¶
The text input should render with the normal input styling: a visible border and background, as before and as again in 7.0.
Actual behavior¶
The input has border-style: none and outline: none and no distinguishable background, so it is visually indistinguishable from static text.
Root cause (found via DevTools)¶
Redmine 6.x loads a JS bundle for the newer "modal issue" quick-view/quick-edit feature (asset modal-issue-*.js). This bundle injects a <style> element directly into <head> at runtime, not scoped to the modal component (e.g. via a class prefix or Shadow DOM). Among its rules is this unscoped reset, presumably only intended for the modal's own form controls (other rules in the same injected stylesheet ARE scoped, e.g. .rm-input__input, .kanban-options__list input[type="number"], .realstatuses__select ...):
input[type="text"], input[type="date"], input[type="password"],
input[type="search"], input[type="number"] {
border-style: none;
outline: none;
}
Because this selector has no scoping class, it applies to every matching input on the page, including the classic server-rendered query filter fields, which have nothing to do with the modal-issue feature.
Confirmed the causal link in DevTools: disabling this specific injected stylesheet (document.styleSheets[N].disabled = true) immediately restored the filter input's border/background.
Additional notes¶
This already appears to be fixed in 7.0, most likely as a side effect of the general CSS cleanup done for that release rather than a dedicated fix for this exact symptom, since we could not find an existing tracker ticket describing it.
Workaround for a custom theme on 6.x installations:
#query_form input[type="text"],
#query_form input[type="date"],
#query_form input[type="search"],
#query_form input[type="number"] {
border: 1px solid #bbb;
background: #fff;
}
Updated by 
Updated by