fix: Download as image not working on Dashboard view (#11778)

* Fix download as image not working on Dashboard view

* Fix menu not closing before making a screenshot

* Move hardcoded selectors to variables

* Fix linting issue

* Add comments

* Close menu before taking a screenshot on Explore view

* Use style.visibility instead of timeout to hide menu for screenshot

* Change const name to uppercase

* Move variable declarations to case

superset-frontend/src/explore/components/DisplayQueryButton.jsx

@@ -90,6 +90,7 @@ export const DisplayQueryButton = props => {
     datasource && datasource.split('__')[1] === 'table',
   );
   const [isPropertiesModalOpen, setIsPropertiesModalOpen] = useState(false);
+  const [menuVisible, setMenuVisible] = useState(false);
 
   const tableData = useMemo(() => {
     if (!data?.length) {
@@ -150,6 +151,7 @@ export const DisplayQueryButton = props => {
 
   const handleMenuClick = ({ key, domEvent }) => {
     const { chartHeight, slice, onOpenInEditor, latestQueryFormData } = props;
+    setMenuVisible(false);
     switch (key) {
       case MENU_KEYS.EDIT_PROPERTIES:
         openPropertiesModal();
@@ -273,6 +275,7 @@ export const DisplayQueryButton = props => {
   const { slice } = props;
   return (
     <DropdownButton
+      open={menuVisible}
       noCaret
       data-test="query-dropdown"
       title={
@@ -284,6 +287,7 @@ export const DisplayQueryButton = props => {
       bsSize="sm"
       pullRight
       id="query"
+      onToggle={setMenuVisible}
     >
       <Menu onClick={handleMenuClick} selectable={false}>
         {slice && [