За да направя така, че падащото меню да се прибира при цъкане извън него реших да използвам събитието focusout на елементът, съдържащ целия компонент. Събитието focusout може да бъде прихванато от всеки елемент в йерархията, независимо дали самия елемент може да приема фокус, така че беше идеално за целта. Щом фокуса отида другаде, а това става и когато се цъкне с мишката извън него или пък потребителя се прехвърли на друг елемент с tab, значи падащото меню трябва да се прибере. Да, ама не и в Сафари. Там нещата винаги работят по друг начин.

Оказа се, че в Сафари взаимодействията с мишката не водят до промяна на фокуса. Т.е. цъкането с мишката върху бутон не поставя фокуса върху него. Съответно цъкането извън бутона няма да предизвика загуба на фокус от бутона. К’во правим сега?

Реших проблема като зорлем поставих елемента на фокус при цъкане с мишката върху него. От там нататък всичко продължава да действа както преди.

dropdown.addEventListener( 'mouseup', function( e ) {
  this.focus();
  e.preventDefault();
} );

Дано това да ви помогне и на вас ако срещнете подобен проблем. А самия компонент в действие може да разгледате на адрес https://www.thenaturaladventure.com/tours/. Обратната връзка е добре дошла.