0

I have a search modal that pops up once you click an icon, I currently have autofocus="autofocus" on the input and it's not working in FF (Firefox). It seems to be working properly in Chrome. I've been trying to implement various JS to workaround this issue with no luck.

Any help would be greatly appreciated!

This is the last JS I've tried:

<script type="text/javascript">
    $('#search').on('shown.bs.modal', function() {
        $(this).find('#searchbar').focus();
    });
</script>

...and tried this before that:

<script type="text/javascript">
  $('#searchbar').focus();
</script>

No dice.

Shidersz
  • 16,846
  • 2
  • 23
  • 48
Mhutch
  • 11
  • 4

1 Answers1

0

You can try using setTimeout() with a delay of 0 milliseconds (or another low value) to trigger the setting of the focus after you detect the modal has shown with the event shown.bs.modal, like:

function setFocusOnSearchBar()
{
    $('#searchbar').focus();
}

$("#myModal").on('shown.bs.modal', function()
{
    setTimeout(setFocusOnSearchBar, 0);
});

This approach has been tested successfully on:

  • Firefox 50.1.0
  • Firefox 68.0.2 (64 bit)
  • Chrome Version 60.0.3112.113 (Official Build) (64-bit)
  • Chrome Versión 76.0.3809.100 (Official Build) (64-bit)

Full Example:

function setFocusOnSearchBar()
{
    $('#searchbar').focus();
}

$("#myModal").on('shown.bs.modal', function()
{
    setTimeout(setFocusOnSearchBar, 0);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="container-fluid">
  <h2>Modal Example</h2>

  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <input id="searchbar" type="text" placeholder="Type to search...">
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>

</div>
Community
  • 1
  • 1
Shidersz
  • 16,846
  • 2
  • 23
  • 48
  • Hmm...I added your code to the bottom of the page to test to see if the modal would work as well as if the focus would be on the input. The modal seemed to work properly, but the focus was NOT on the input. I'm so confused... – Mhutch Aug 21 '19 at 12:59
  • @Mhutch But it works on the snippet example I have made, and I have tested it on different versions of browsers. What version of _Firefox_ you have? Have you tried the code alone, maybe you have something else in your code conflicting with this. – Shidersz Aug 21 '19 at 15:10
  • I have FF 68.0.1. Yes, it works in the snippet example. I have some errors (apparently) and I'm wondering if that's the issue. I just can't figure out where and how to correct them. So, yes, I agree, I think there is a conflict happening here. – Mhutch Aug 21 '19 at 15:22
  • I feel that there is some sort of conflict. I created a page with basically nothing on it except the navigation and the modal code you supplied and they still don't work. You can view the page here: https://www.goiwt.com/index2.htm – Mhutch Aug 21 '19 at 18:30
  • @Mhutch Try first moving the `script` after including all the libraries, i.e, on the last section of the `` tag, otherwise, if you check the developer console, you will see the next error: _Uncaught ReferenceError: $ is not defined at index2.htm:483_. After that, if still don't work, update the `JQuery` library, you are using an old (`1.12.4`) version. – Shidersz Aug 21 '19 at 18:40
  • I moved the script and updated the Jquery library, unfortunately it still doesn't work. I'm mainly focusing on getting yours to work at this point and am hoping that once yours works, I can get mine to work. Thanks again for the assistance thus far! – Mhutch Aug 21 '19 at 19:07
  • @Mhutch Ok, good luck with that, remember to always check the developer console in search for errors. Anyway, if the answer helps you somehow, take into consideration to accept it. – Shidersz Aug 21 '19 at 20:45
  • hey there, I'm having a hard time figuring this out, any other thoughts?? Testing on https://www.goiwt.com/index2.htm now. – Mhutch Aug 22 '19 at 19:45
  • @Mhutch I can see you have `script` tags inside the `head`. Try moving they all to the `body` tag, check the [Bootstrap Starter Template](https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template) and follow that skeleton. It is hard to tell what is causing the error, since you have lot of libraries/plugins included there. – Shidersz Aug 22 '19 at 21:02
  • Ok, so I figured out how to get yours to work. I believe the issue was that I was using the same id ="searchbar" on both search inputs. When I changed the id on your example to "searchbar2" it works! Now I just need to figure out mine... – Mhutch Aug 23 '19 at 17:23