Make a textbox inside the dropdown to focus-CodePudding

I need to always focus on the textbox

<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,GRAD@48,400,0,0">



<div >
  <input type="text"  aria-label="Text input with segmented dropdown button">
  <button type="button" >Action</button>
  <button type="button"  data-bs-toggle="dropdown" aria-expanded="false">
    <span >Toggle Dropdown</span>
  </button>
  <div >
    <input type="text" placeholder="Search.."  />

<p>
This is a text
</p>

  </div>
</div>

CodePudding user response：

You can achieve this by adding an onClick event, and use the focus() method on your search field when the dropdown is shown.

So it will look like this :

const dropdownButton = document.getElementsByClassName("dropdown-toggle")[0];
const inputToFocus = document.getElementsByClassName("search")[0];
dropdownButton.addEventListener('click', event => {
  inputToFocus.focus();
});

<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,GRAD@48,400,0,0">



<div >
  <input type="text"  aria-label="Text input with segmented dropdown button">
  <button type="button" >Action</button>
  <button type="button"  data-bs-toggle="dropdown" aria-expanded="false">
    <span >Toggle Dropdown</span>
  </button>
  <div >
    <input type="text" placeholder="Search.."  />

<p>
This is a text
</p>

  </div>
</div>

<script>
  
</script>

Hope it helped ! Good luck :)