Usuń focus z wszystkich elementów , kiedy użytkownik kliknie gdziekolwiek

Question

Case jest taki. Użytkownik klika w button pojawia się mu searchBar. Potym zdarzeniu, użytkownik nie kliknął w element searchBar, tylko jakiś inny. Spodziewał się, że wyszukiwarka zniknie. Wyszukiwarka nie zniknęła.

Czy ktoś ma jakiś hacktrick na taki case?

Kod, wygląda tak:

export default class MobileSearch {
    constructor() {
        this.state = {
            'searchBarIsOpen' : false
        }
        this.props = {
            'width': window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth
        };

        this.DOMComponents = {
            'search': document.getElementById('search'),
            'searchBar': document.getElementById('searchBar'),
            'searchInput': document.getElementById('searchInput')
        };

        this.startBodyListener();
        this.startListener();
    }

    startBodyListener() {
        if (this.props.width < Breakpoints.desktop) {
            document.addEventListener('click', (event) => this.couldHideBar(event));
        }
    }

    startListener() {
        if (this.props.width < Breakpoints.desktop) {
            this.DOMComponents.search.addEventListener(
                'click', () => this.showSearchBar()
            );
        }
    }

    showSearchBar() {
        this.DOMComponents.searchBar.classList.add('search__inputWraper--show');
        this.DOMComponents.searchInput.addEventListener(
            'blur' , ()=> this.hideSearchBar()
        );
        this.state.searchBarIsOpen = !this.state.searchBarIsOpen;
    }

    couldHideBar(eventElement){
        console.log(this.state.searchBarIsOpen); // Tu jest juz true przed pierwsza iteracja
        if (eventElement.target.parentNode.id === 'searchBar' || !this.state.searchBarIsOpen) {
            return;
        }
        this.hideSearchBar();
    }

    hideSearchBar() {
        this.DOMComponents.searchBar.classList.remove('search__inputWraper--show');
    }
}

Sam kod, odpowiedzialny za usuwanie elementu, gdy ktoś kliknie w inne pole.

   couldHideBar(eventElement){
        console.log(this.state.searchBarIsOpen); // Tu jest juz true przed pierwsza iteracja
        if (eventElement.target.parentNode.id === 'searchBar' || !this.state.searchBarIsOpen) {
            return;
        }
        this.hideSearchBar();
    }

Ostatecznie jakiś X wstawię ;/.

Struktura HTML

<div class='search'>
    <button  id='search' tabindex="1" class='search__button'></button>
    <div id='searchBar' tabindex="2" class='search__inputWraper'>
        <input class='search__input' type='text' id='searchInput' placeholder='search'/>
        <label class='search__label' for='searchInput'></label>
    </div>
</div>

 

Answer 1

window.addEventListener('click', e => {
  if (!e.target.matches('#searchBar, #searchBar *')) {
   // kliknięcie poza #searchBar
  }
})

 

Comments

Dziekuje dobry człowieku:)