https://www.hiltonheadisland.org/themes/custom/hhi/templates/patterns/search_toggle/search-toggle.js?tlx7u6

1(function (Drupal, once) {
2  'use strict';
3
4	 // Carousel Pattern
5	 Drupal.behaviors.searchToggle = {
6    attach: function (context) {
7			
8      once('searchToggle', '.search-toggle', context).forEach(function(element) {
9				let buttonToggle = element.querySelector('.js-search-toggle__button')
10				let formWrapper = element.querySelector('.js-search-toggle__form-wrapper')
11				let searchInput = element.querySelector('.js-search-toggle__input');
12				
13				buttonToggle.addEventListener('click', function(){
14					if (!formWrapper.classList.contains('search-toggle__form-wrapper--open')){
15						formWrapper.classList.add('search-toggle__form-wrapper--open');
16						buttonToggle.setAttribute('aria-expanded', 'true');
17					}
18
19					else {
20						formWrapper.classList.remove('search-toggle__form-wrapper--open');
21						buttonToggle.setAttribute('aria-expanded', 'false');
22					}
23				});
24
25				formWrapper.addEventListener(transitionEndEventName, function() {
26					if (formWrapper.classList.contains('search-toggle__form-wrapper--open')){
27						searchInput.focus();
28					}
29				});
30
31
32				// I orginally wanted the search to auto close when it lost focus but when the user clicks on the toggle button it just opens it up again
33				// searchInput.addEventListener('focusout', function() {
34				// 		formWrapper.classList.remove('search-toggle__form-wrapper--open');
35				// 		buttonToggle.setAttribute('aria-expanded', 'false');
36				// });
37
38
39			});
40    }
41  };
42
43	// https://www.educative.io/answers/how-to-detect-the-end-of-css-transition-events-in-javascript
44	function getTransitionEndEventName() {
45		var transitions = {
46				"transition"      : "transitionend",
47				"OTransition"     : "oTransitionEnd",
48				"MozTransition"   : "transitionend",
49				"WebkitTransition": "webkitTransitionEnd"
50		 }
51		let bodyStyle = document.body.style;
52		for(let transition in transitions) {
53				if(bodyStyle[transition] != undefined) {
54						return transitions[transition];
55				} 
56		}
57	}
58
59	// using above code we can get Transition end event name
60	let transitionEndEventName = getTransitionEndEventName();
61
62})( Drupal, once);