Use closeDropdown method to close SelectBox dropdown rather than cust…

…om workaround

src/ts/components/settingspanel.ts

@@ -371,36 +371,15 @@ export class SettingsPanel extends Container<SettingsPanelConfig> {
   }
 
   /**
-   * Hack for IE + Firefox
+   * Workaround for IE, Firefox and Safari
    * when the settings panel fades out while an item of a select box is still hovered, the select box will not fade out
    * while the settings panel does. This would leave a floating select box, which is just weird
    */
   private hideHoveredSelectBoxes(): void {
-    this.getComputedItems().forEach((item: SettingsPanelItem) => {
-      if (item.isActive() && (item as any).setting instanceof SelectBox) {
-        const selectBox = (item as any).setting as SelectBox;
-        const oldDisplay = selectBox.getDomElement().css('display');
-        if (oldDisplay === 'none') {
-          // if oldDisplay is already 'none', no need to set to 'none' again. It could lead to race condition
-          // wherein the display is irreversibly set to 'none' when browser tab/window is not active because
-          // requestAnimationFrame is either delayed or paused in some browsers in inactive state
-          return;
-        }
-
-        // updating the display to none marks the select-box as inactive, so it will be hidden with the rest
-        // we just have to make sure to reset this as soon as possible
-        selectBox.getDomElement().css('display', 'none');
-        if (window.requestAnimationFrame) {
-          requestAnimationFrame(() => {
-            selectBox.getDomElement().css('display', oldDisplay);
-          });
-        } else {
-          // IE9 has no requestAnimationFrame, set the value directly. It has no optimization about ignoring DOM-changes
-          // between animationFrames
-          selectBox.getDomElement().css('display', oldDisplay);
-        }
-      }
-    });
+    this.getComputedItems()
+      .map(item => item['setting'])
+      .filter(component => component instanceof SelectBox)
+      .forEach((selectBox: SelectBox) => selectBox.closeDropdown());
   }
 
   // collect all items from all pages (see hideHoveredSelectBoxes)