Disappearance of the Select Dropdown Arrow When Using Autocomplete

[thiagogaia]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Issue: Disappearance of the Select Dropdown Arrow When Using Autocomplete

Tested Browsers:

• Google Chrome
• Mozilla Firefox

Steps to Reproduce:

1. Create a form that supports autocomplete (e.g., "state").
2. Add a select field for autocomplete functionality.
3. Observe that the dropdown arrow for the select field disappears.

Example:

A live example of the issue can be seen here:
[CodePen Example](https://codepen.io/designer-professional/pen/ZYzVrLR)

Screenshot:

As shown in the screenshot, the dropdown arrow for the select field vanishes when autocomplete is enabled, making it unclear to users that additional options are available in the field.

Reduced test cases

https://codepen.io/designer-professional/pen/ZYzVrLR

What operating system(s) are you seeing the problem on?

Linux, Windows

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

5.3.3

[thiagogaia]

Suggested Fix: Use a Pseudo-Class for the Select Dropdown Arrow

Problem:

The issue arises because the dropdown arrow for the select element in Bootstrap is implemented as a background, which gets overridden when the browser's native autocomplete interacts with the field.

Solution:

Instead of relying on the background property for the dropdown arrow, implement it using a pseudo-element, such as ::after or ::before. This ensures the arrow remains visible, as pseudo-elements are not affected by the browser's autocomplete behavior.

Example Fix:

select {
  appearance: none; /* Hide default browser styling */
  position: relative;
  padding-right: 2rem; /* Add space for the arrow */
}

select::after {
  content: var(--bs-form-select-bg-img); /* Customize the dropdown arrow */
  position: absolute;
  right: 1rem; /* Adjust spacing */
  pointer-events: none; /* Prevent interaction */
  font-size: 0.8rem; /* Scale the arrow */
  color: #6c757d; /* Match Bootstrap's styling */
}

Notes:

1. Ensure appearance: none is used to remove the browser's default arrow.
2. Position the pseudo-element carefully to align it with the field, considering padding and margins.
3. Maintain compatibility with different themes and colors in Bootstrap by using appropriate variables or classes.

This approach provides a consistent experience across browsers and ensures the arrow remains visible even when autocomplete is active.