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

[fudom]

Prerequisites

• I have searched for duplicate or closed feature requests
• 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

bootstrap/scss/forms/_form-control.scss

Lines 34 to 45 in fecd219

	&:focus {
	color: $input-focus-color;
	background-color: $input-focus-bg;
	border-color: $input-focus-border-color;
	outline: 0;
	@if $enable-shadows {
	@include box-shadow($input-box-shadow, $input-focus-box-shadow);
	} @else {
	// Avoid using mixin so we can pass custom focus shadow properly
	box-shadow: $input-focus-box-shadow;
	}
	}

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!