CODEWITHSUNDEEP
javascripthtmlbootstrap-4
Brandon E Taylor
Brandon E Taylor

Reputation: 25359

Focus Issue with Two Inputs in a Single Label

I am looking for a way to associate a radio button and text input together in label (where the label has Bootstrap's button style applied). Visually, the following yields what I want:

<form>
  <div class="btn-group" data-toggle="buttons" id="btn-group-id1">
    <label class="btn btn-primary">
      <input type="radio" name="options"/ > 
      Unassigned
    </label>
  </div>
  <div class="btn-group" data-toggle="buttons" id="btn-group-id2">
    <label class="btn btn-primary">
      <input type="radio" name="options"/ > 
      Single Bit
      <input type="number" name="other_reason" placeholder="Enter bit number" min="0" max="4096"/>
    </label>
  </div>
  <div class="btn-group" data-toggle="buttons" id="btn-group-id3">
    <label class="btn btn-primary">
      <input type="radio" name="options"/ > 
      Bit Range
      <input type="text" name="bit_range" placeholder="Enter bit range" size="10"/>
    </label>
  </div>
  <div>
    <input type="button" id="test-submit" value="Submit"/>
  </div>
</form>

My Fiddle: https://jsfiddle.net/betaylor73/qfnr5w2t/143/

The problem, however, comes when I try to click in either the number input associated with the second radio button or the text input associated with the third radio button. When I do so, the focus is immediately shifted to the corresponding radio button. I suspect that this due to having two inputs within a single label.

How, then, can I address this focus issue while retaining the desired look-and-feel?

Upvotes: 1

Views: 37

Answers (2)

Ammad Amir
Ammad Amir

Reputation: 518

Just remove data toggle from btn group div. Well the approach you are using is not the right one. Take a look to bootstrap form group here https://getbootstrap.com/docs/4.0/components/forms/

label.btn-primary {
   display: flex;
   height: 40px;
   align-items: center;
}

input {
  display: flex;
  margin: 5px;
}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<form>
  <div class="btn-group" data-toggle="" id="btn-group-id1">
    <label class="btn btn-primary">
      <input type="radio" name="options"/ > 
      Unassigned
    </label>
  </div>
  <div class="btn-group" data-toggle="" id="btn-group-id2">
    <label class="btn btn-primary">
      <input type="radio" name="options"/ > 
      Single Bit
      <input type="number" name="other_reason" placeholder="Enter bit number" min="0" max="4096"/>
    </label>
  </div>
  <div class="btn-group" data-toggle="" id="btn-group-id3">
    <label class="btn btn-primary">
      <input type="radio" name="options"/ > 
      Bit Range
      <input type="text" name="bit_range" placeholder="Enter bit range" size="10"/>
    </label>
  </div>
  <div>
    <input type="button" id="test-submit" value="Submit"/>
  </div>
</form>

Upvotes: 1

Mohammad Mostafa Dastjerdi
Mohammad Mostafa Dastjerdi

Reputation: 714

You have to use input groups instead. see https://getbootstrap.com/docs/5.0/forms/input-group/

Upvotes: 1

Related Questions