Choose the search bar once you have switched the appearance of the Bootstrap navbar

I am attempting to create a navigation bar with a button that toggles a div containing a search form. When the user clicks on the search button, I want the headerSearch div to be displayed, and the navbarSearch input to be automatically selected.

Although the search form is displayed, the input field is not automatically selected using the following code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
     logo
    </a>
    <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#headerSearch" aria-controls="headerSearch" aria-expanded="false" onclick="selectSearchBox()">
     Search
    </button>
  </div>
</nav>
<div class="collapse navbar-collapse bg-dark py-1" id="headerSearch">
  <div class="container">
    <form method="get" role="search" class="form-inline">
      <input class="input form-control mr-1" id="navbarSearch" type="text" name="query">
      <button class="btn btn-outline-light" type="submit">
        Search
      </button>
    </form>
  </div>
</div>

<script>
  function selectSearchBox() {
    document.getElementById("navbarSearch").select();
  }
</script>

javascripttwitter-bootstrapbootstrap-4

Answer №1

Instead of using .select(), try using .focus() instead.
Wrap it in a setTimeout() function to ensure it runs after Bootstrap has displayed the search container, triggered by the data-toggle attribute on the button:

function selectSearchBox() {
  setTimeout(() => {
    const nS = $('#navbarSearch');
    nS.is(':visible') && nS.focus();
  }, 400)
}

Check it out in action: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
     logo
    </a>
    <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#headerSearch" aria-controls="headerSearch" aria-expanded="false" onclick="selectSearchBox()">
     Search
    </button>
  </div>
</nav>
<div class="collapse navbar-collapse bg-dark" id="headerSearch">
  <div class="container pt-1 pb-3">
    <form method="get" role="search" class="form-inline">
      <input class="input form-control mr-1" id="navbarSearch" type="text" name="query">
      <button class="btn btn-outline-light" type="submit">
        Search
      </button>
    </form>
  </div>
</div>

<script>
    function selectSearchBox() {
      setTimeout(() => {
        const nS = $('#navbarSearch');
        nS.is(':visible') && nS.focus();
      }, 400)
    }
</script>

Note 1: While a setTimeout of 0 would still work, setting it to 400 provides a better user experience by focusing the input after the animation. This also prevents focusing the input while collapsing.

Note 2: Shifting the padding from #headerSearch to its inner .container will smoothen the collapsing animation without any sudden jolts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting maxFontSizeMultiplier for all Text components

Is there a way to apply the prop maxFontSizeMultiplier={1} to all instances of <Text/> in my app without the need for a custom component? ...

javascriptreactjsreact-native

display a dual-column list using ngFor in Angular

I encountered a situation where I needed to display data from an object response in 2 columns. The catch is that the number of items in the data can vary, with odd and even numbers. To illustrate, let's assume I have 5 data items to display using 2 co ...

javascripthtmlcssangulartypescript

React-Redux showing no errors despite non-functional Redux store

I'm currently facing an issue with integrating React-Redux into my React Native/Expo project. Despite not receiving any console error messages, the data from the Redux store is not displaying in the user interface. Below are some key files related to ...

javascriptreactjsreact-nativereduxreact-redux

How can I trigger an event in Vue.js when a selection is made in a dropdown menu?

Here is an illustration fiddle: https://jsfiddle.net/40fxcuqd/ Initially, it shows the name "Carl" If I choose Carol, Clara, etc., an event will be triggered and data will be logged to the console. However, if I click on the dropdown and select "Carl" ...

javascriptvue.js

JavaScript: Translating Date into Moment

Is there a way to convert a Date object to Moment in JavaScript? let testDate = new Date(2020, 05, 03, 1, 2); I attempted the following code without success toMoment(testDate) What is the correct syntax to achieve this conversion? ...

javascripttypescript

How to Use AJAX, jQuery, and JSON to Send an Array to PHP

I'm attempting to send an associative array through AJAX $.post to a PHP script. Below is the code I am using: var request = { action: "add", requestor: req_id, ... } var reqDetails = $("#request_details").val(); ...

javascriptphpjqueryajaxjson

Tips on combining JSON array elements into a new JSON array using NodeJS

Is it possible to manipulate a JSON array with 100 objects? Each object contains key values for Job Number, Tax Amount, Line Total, and Line Total plus Tax. The task is to create a new JSON array with Job Number, Total Tax Amount, Sum of Tax Items, and Sum ...

javascriptnode.jsarraysjson

Refresh the webpage source code for an AJAX request

When using AJAX calls on a page, I have noticed that the page source remains unchanged. This can be problematic if a user performs forward/backward operations in their browser, as the browser will display the original HTML code instead of the updated conte ...

javascripthtmlajaxreload

What is the best way to utilize the handlebars-helpers library within an express.js application?

Currently I am using hbs as my template engine in express.js. The handlebars-helpers library from assemble is something that I find extremely useful. However, I am unsure about how to integrate this library into my project. I have also been unable to loca ...

javascriptnode.jsexpresshandlebars.jsassemble

Instead of using a hardcoded value, opt for event.target.name when updating the state in a nested array

When working with a dynamically added nested array in my state, I encounter the challenge of not knowing the key/name of the array. This lack of knowledge makes it difficult to add, update, iterate, or remove items within the array. The problem lies in fun ...

javascriptreactjs

What is the best way to utilize the `Headers` iterator within a web browser?

Currently, I am attempting to utilize the Headers iterator as per the guidelines outlined in the Iterator documentation. let done = false while ( ! done ) { let result = headers.entries() if ( result.value ) { console.log(`yaay`) } ...

javascripttypescriptdomecmascript-6iterator

Tips on preventing a lone track in Laravel for Server Sent Events

In my Laravel app, I am exploring the use of Server Sent Events. The issue I have encountered is that SSE requires specifying a single URL, like this: var evtSource = new EventSource("sse.php"); However, I want to send events from various parts/controlle ...

javascriptphphtmllaravelserver-sent-events

Users who are utilizing Internet Explorer are unable to complete the search input field on my website

Hello, I am in the process of creating a website that frequently uses lengthy search terms. To optimize user experience, I have implemented a dropdown search bar inspired by the bootsnipp example below. While I have applied some custom styling to the desig ...

jquerycsshtmlnavigationbootstrap-4

How to retrieve a string value from an object in Express.Js by using the key value pair

I'm wondering about the proper way to retrieve a value from an object where the key value is a string. This involves sending data from the client side and receiving it on the backend using express.js. Example of data sent from the client side: var ...

javascriptnode.jsexpress

Does anyone know of a way to integrate a calendar feature into a React application using a library

Greetings to everyone, I trust you are all enjoying a fantastic day. I am in search of an interactive calendar similar to this one for one of my applications https://i.sstatic.net/D3S3a.png Does anyone know of a React library that could assist me in crea ...

javascriptreactjsnpmnode-modulesnpm-package

What is the best method for ensuring a user remains logged in even after their access token expires, requiring them to log in again to resume their normal

Currently utilizing the Nuxt-axios module alongside a proxy. Implemented common error handling code in Plugins/axios.js export default function({ $axios, __isRetryRequest, store, app, redirect , payload , next}) { $axios.onRequest(config => { i ...

javascriptvuejs2axiosnuxt.jsrefresh-token

The Bootstrap 5 gem caused a production build error on Netlify

After cloning a repository, I started using Jekyll 4 and integrating the Bootstrap 5 gem from this repository. The project works fine locally, but runs into issues in the production environment. I am hosting the site on Netlify and noticed that the build ...

twitter-bootstrapsassjekyllbootstrap-5netlify

What is the reason for findUser.username returning as unidentified?

I am encountering an issue where the findUser.username is being printed in my console.log, but the error persists. I would appreciate some assistance with this problem. Thank you. const auth_user = [ { username: "amylussie", password: ...

javascriptreactjs

Having issues with inline conditional statements in Angular 5

There is a minor issue that I've been struggling to understand... so In my code, I have an inline if statement like this: <button *ngIf="item?.fields?.assetType !== 'tool' || item?.fields?.assetType !== 'questions'">NEXT< ...

javascriptangulartypescript

The authentication protocol, Next Auth, consistently provides a 200 status response for the signIn function

I ran into a challenge while building my custom login page using Next Auth. The issue arises when I try to handle incorrect login data. If the login credentials are correct, I am able to successfully send JWT and redirect to /dashboard. However, when the l ...

javascriptnext.jsjwtnext-auth