Add `:focus-within` class like `.form-control:focus`

[fudom]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

Please add :focus-within class like .focus-within with the same styles like .form-control:focus. This allows to e.g. implement custom input components thich uses input as child and as parent a div. The div should then look like an input element which already works with .form-control. With focus-within it would mock it perfectly.

Motivation and context

Currently I crafting a custom input component for tags (aka chips or labels), because Bootstrap has none. I have a blank input element as child and the div parent - which also holds the chips - should look like the input.

More information

https://github.com/twbs/bootstrap/blob/fecd219983539aa0110a7e09d31b8aa4d5fb4348/scss/forms/_form-control.scss#L34-L45

This exact styles should be use for the .focus-within:focus-within. Or we could just use: .form-control:focus-within Because the focus styles related on the base class. I see no reason, why not. As I can see, the form-control class is only used for input element, which never have childs. Otherwise the .focus-within class needs the same styles like .form-control.

The solution is easy:

- &:focus {
+ &:focus, &:focus-within {

Example solution to make a div which has an input (styleless) within look like an input:

/* Same styles like :focus */
.form-control:focus-within {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.chips-input {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.chips-input input {
  flex-grow: 1;
  min-width: 100px;
  border: none;
  outline: none;
}

<div class="chips-input form-control">
  <div class="badge text-bg-secondary">One</div>
  <div class="badge text-bg-secondary">Two</div>
  <input type="text" />
</div>

Try it out in the live demo!

[ritikpal1122]

assign