Закрытие выпадающего меню, если открывается другое+ закрытие по клику на документ

Облазил все форумы, посмотрел кучу видео, но так и не смог реализовать закрытие по клику на документ и при открытии другой менюшки. Если можно, то на чистом JS, пожайлуста. Благодарю

const listButton = document.querySelectorAll('.seacrh-header__icon');
    const listAppear = document.querySelectorAll('.seacrh-header__list');
    listButton[0].addEventListener("click",function(e){
        listAppear[0].classList.toggle("menu-active");
    });
    listButton[1].addEventListener("click",function(e){
        listAppear[1].classList.toggle("menu-active");
    });
    listButton[2].addEventListener("click",function(e){
        listAppear[2].classList.toggle("menu-active");
    });

<div class="header__seacrh seacrh-header">
        <div class="seacrh-header__container">
            <div class="seacrh-header__device"><input disabled autocomplete="off" type="text" name="form[]" data-error="Ошибка" placeholder="Выберите устройство" class="seacrh-header__input">

    <button type="button" class="seacrh-header__icon _icon-arrow-down"></button>
                <div class="seacrh-header__list">
                    <div class="seacrh-header__body">
                        <button type="button" class="seacrh-header__item">iPhone</button>
                        <button type="button" class="seacrh-header__item">iPhone</button>
                        <button type="button" class="seacrh-header__item">iPhone</button>
                        <button type="button" class="seacrh-header__item">iPhone</button>
                        <button type="button" class="seacrh-header__item">iPhone</button>
                        <button type="button" class="seacrh-header__item">iPhone</button>
                        <button type="button" class="seacrh-header__item">iPhone</button>
                        <button type="button" class="seacrh-header__item">iPhone</button>
                        <button type="button" class="seacrh-header__item">iPhone</button>
                        <button type="button" class="seacrh-header__item">iPhone</button>
                    </div>
                </div></div>
                <div class="seacrh-header__type"><input disabled autocomplete="off" type="text" name="form[]" data-error="Ошибка" placeholder="Выберите марку" class="seacrh-header__input"><button type="button" class="seacrh-header__icon _icon-arrow-down"></button>
                    <div class="seacrh-header__list">
                        <div class="seacrh-header__body">
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                        </div>
                    </div></div>
                <div class="seacrh-header__model"><input disabled autocomplete="off" type="text" name="form[]" data-error="Ошибка" placeholder="Выберите модель" class="seacrh-header__input"><button type="button" class="seacrh-header__icon _icon-arrow-down"></button>
                    <div class="seacrh-header__list">
                        <div class="seacrh-header__body">
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                            <button type="button" class="seacrh-header__item">iPhone</button>
                        </div>
                    </div></div>
                <button class="seacrh-header__button">НАЙТИ</button>
            </div>
        </div>