fix(fuselage-ui-kit): MultiStaticSelectElement not working as expected

.changeset/mighty-drinks-hide.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": patch
+"@rocket.chat/fuselage-ui-kit": patch
+---
+
+Fixes usage of dispatchActionConfig setted as "on_item_selected" for MultiStaticSelectElement in UiKit

apps/meteor/tests/e2e/apps/apps-modal.spec.ts

@@ -7,7 +7,7 @@ import { expect, test } from '../utils/test';
 
 test.use({ storageState: Users.user1.state });
 
-test.describe.serial('Apps > ContextualBar', () => {
+test.describe.serial('Apps > Modal', () => {
 	let poHomeChannel: HomeChannel;
 	let poModal: Modal;
 

packages/fuselage-ui-kit/src/hooks/useUiKitState.spec.ts

@@ -0,0 +1,42 @@
+import type { MultiStaticSelectElement } from '@rocket.chat/ui-kit';
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import { useUiKitState } from './useUiKitState';
+
+const multiStaticSelectElement: MultiStaticSelectElement = {
+  type: 'multi_static_select',
+  placeholder: { type: 'plain_text', text: 'placeholder test' },
+  options: [{ text: { type: 'plain_text', text: 'A' }, value: 'A' }],
+  appId: 'test_app',
+  blockId: 'multi_static_select_block',
+  actionId: 'multi_static_select',
+};
+
+it("should MultiSelectElement with dispatchActionConfig equal ['on_item_selected'] update value correctly", async () => {
+  multiStaticSelectElement.dispatchActionConfig = ['on_item_selected'];
+
+  const { result } = renderHook(() =>
+    useUiKitState(multiStaticSelectElement, 0)
+  );
+
+  // First interaction
+  const event = { target: { value: ['A'] } };
+  await act(async () => result.current[1](event));
+
+  expect(result.current[0].value).toContain('A');
+
+  // Second interaction
+  event.target.value = ['A', 'B'];
+  await act(async () => result.current[1](event));
+
+  event.target.value.map((value) =>
+    expect(result.current[0].value).toContain(value)
+  );
+
+  // Third interaction
+  event.target.value = ['B'];
+  await act(async () => result.current[1](event));
+
+  expect(result.current[0].value).not.toContain('A');
+  expect(result.current[0].value).toContain('B');
+});

packages/fuselage-ui-kit/src/hooks/useUiKitState.ts

@@ -70,15 +70,20 @@ export const useUiKitState = <TElement extends UiKit.ActionableElement>(
     const {
       target: { value: elValue },
     } = e;
+
     setLoading(true);
 
     if (Array.isArray(value)) {
-      const idx = value.findIndex((value) => value === elValue);
-
-      if (idx > -1) {
-        setValue(value.filter((_, i) => i !== idx));
+      if (Array.isArray(elValue)) {
+        setValue(elValue);
       } else {
-        setValue([...value, elValue]);
+        const idx = value.findIndex((value) => value === elValue);
+
+        if (idx > -1) {
+          setValue(value.filter((_, i) => i !== idx));
+        } else {
+          setValue([...value, elValue]);
+        }
       }
     } else {
       setValue(elValue);