NEXT-38490 - Fix select closing

shopware · Oct 30, 2024 · 113238a · 113238a
1 parent cf3a3c5
commit 113238a
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 20 deletions.
diff --git a/...ests-form-mt-select--visual-test-ensure-selection-opens-via-indicators-snap.png b/...ests-form-mt-select--visual-test-ensure-selection-opens-via-indicators-snap.png
diff --git a/packages/component-library/src/components/form/_internal/mt-select-base/mt-select-base.vue b/packages/component-library/src/components/form/_internal/mt-select-base/mt-select-base.vue
@@ -22,7 +22,7 @@
         ref="selectWrapper"
         class="mt-select__selection"
         tabindex="0"
-        @click="expand"
+        @click.stop="expand"
         @focus="expand"
         @keydown.tab="collapse"
         @keydown.esc="collapse"
@@ -31,25 +31,32 @@
           name="mt-select-selection"
           v-bind="{ identification, error, disabled, size, expand, collapse }"
         />
-        <div class="mt-select__selection-indicators">
-          <mt-loader v-if="isLoading" class="mt-select__select-indicator" size="16px" />
-
-          <button
-            v-if="!disabled && showClearableButton"
-            class="mt-select__select-indicator-hitbox"
-            data-clearable-button
-            data-testid="select-clear-button"
-            @click.prevent.stop="emitClear"
-            @keydown.tab.stop="focusParentSelect"
-          >
-            <mt-icon
-              class="mt-select__select-indicator mt-select__select-indicator-clear"
-              name="regular-times-xxs"
-            />
-          </button>
-
-          <mt-icon class="mt-select__select-indicator" name="solid-chevron-down-xs" />
-        </div>
+      </div>
+
+      <div class="mt-select__selection-indicators">
+        <mt-loader v-if="isLoading" class="mt-select__select-indicator" size="16px" />
+
+        <button
+          v-if="!disabled && showClearableButton"
+          class="mt-select__select-indicator-hitbox"
+          data-clearable-button
+          data-testid="select-clear-button"
+          @click.prevent.stop="emitClear"
+          @keydown.tab.stop="focusParentSelect"
+        >
+          <mt-icon
+            class="mt-select__select-indicator mt-select__select-indicator-clear"
+            name="regular-times-xxs"
+          />
+        </button>
+
+        <mt-icon
+          class="mt-select__select-indicator"
+          data-testid="mt-select__select-indicator"
+          :class="{ 'mt-select__select-indicator-rotated': expanded }"
+          name="solid-chevron-down-xxs"
+          @click.stop="toggleExpand"
+        />
       </div>
 
       <template v-if="expanded">
@@ -354,6 +361,11 @@ $mt-select-focus-transition: all ease-in-out 0.2s;
   .mt-select__select-indicator {
     flex-shrink: 0;
     cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .mt-select__select-indicator-rotated {
+    transform: rotate(180deg);
   }
 
   .mt-select__select-indicator-clear {

diff --git a/packages/component-library/src/components/form/mt-select/mt-select.interactive.stories.ts b/packages/component-library/src/components/form/mt-select/mt-select.interactive.stories.ts
@@ -407,3 +407,26 @@ export const VisualTestEnsureCorrectMultiSelectionWrapping: MtSelectStory = {
     await userEvent.click(loadMoreButton);
   },
 };
+
+export const VisualTestEnsureSelectionOpensViaIndicators: MtSelectStory = {
+  name: "Should open selection via indicators",
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitUntil(() =>
+      document.querySelector('.mt-select-selection-list__item[title="Option B"]'),
+    );
+
+    // open selection via indicator
+    await userEvent.click(canvas.getByTestId("mt-select__select-indicator"));
+
+    // selection should open
+    const popover = within(
+      document.querySelector(".mt-popover-deprecated__wrapper") as HTMLElement,
+    );
+    await waitUntil(() => popover.getByTestId("mt-select-option--a"));
+
+    // close selection via indicator
+    await userEvent.click(canvas.getByTestId("mt-select__select-indicator"));
+    expect(document.querySelector(".mt-popover-deprecated__wrapper")).toBeNull();
+  },
+};