Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
fudom opened this issue Sep 13, 2024 · 1 comment
Open
2 tasks done

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

fudom opened this issue Sep 13, 2024 · 1 comment

Comments

@fudom
Copy link

fudom commented Sep 13, 2024

Prerequisites

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

&: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>

demo

Try it out in the live demo!

@ritikpal1122

This comment was marked as resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants