Grafana/ui: Enable removing values in multiselect opened state (#78662)

GrafabaUI: enabling remove values in opened state

package.json

@@ -39,6 +39,7 @@
     "start:noLint": "yarn start --env noTsCheck=1 --env noLint=1",
     "stats": "webpack --mode production --config scripts/webpack/webpack.prod.js --profile --json > compilation-stats.json",
     "storybook": "yarn workspace @grafana/ui storybook --ci",
+    "storybook:dev": "yarn workspace @grafana/ui storybook dev -p 9001 -c .storybook --no-open",
     "storybook:build": "yarn workspace @grafana/ui storybook:build",
     "themes:generate": "esbuild --target=es6 ./scripts/cli/generateSassVariableFiles.ts --bundle --platform=node --tsconfig=./scripts/cli/tsconfig.json | node",
     "themes:usage": "eslint . --ext .tsx,.ts --ignore-pattern '*.test.ts*' --ignore-pattern '*.spec.ts*' --cache --rule '{ @grafana/theme-token-usage: \"error\" }'",

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -127,6 +127,10 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
       label: 'grafana-select-multi-value-remove',
       margin: theme.spacing(0, 0.5),
       cursor: 'pointer',
+
+      // enabling remove values in opened state
+      // https://github.com/grafana/grafana/issues/77698
+      zIndex: theme.zIndex.portal + 1,
       svg: {
         marginBottom: 0,
       },