@infermedica/component-library - npm Package Compare versions

Comparing version 1.6.4 to 1.6.5

package.json

 {
   "name": "@infermedica/component-library",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "Vue 3 UI library for healthcare and not only.",
@@ -118,2 +118,2 @@ "license": "MIT",
   }
-}
+}

src/components/organisms/UiMultipleChoices/UiMultipleChoices.stories.js

@@ -9,5 +9,7 @@ import UiMultipleChoices from '@/components/organisms/UiMultipleChoices/UiMultipleChoices.vue';
   computed,
+  nextTick,
 } from 'vue';
 import { actions } from '@storybook/addon-actions';
 import { modifiers } from '@sb/helpers/argTypes';
+import focusOnInvalidChoice from '@/utilities/helpers/focus-on-first-invalid-choice';
 
@@ -129,2 +131,16 @@ const events = actions({
       const invalid = ref(args.initInvalid);
+      const invalidChoices = ref(null);
+
+      const handleSubmit = async () => {
+        await focusOnInvalidChoice(invalidChoices);
+        const { focusInvalidInput } = focusOnInvalidChoice(invalidChoices);
+
+        // Note: Two nextTick functions are required to focus on the first invalid input after page load.
+        await nextTick();
+        await nextTick();
+        focusInvalidInput();
+      };
+
+      handleSubmit();
+
       return {
@@ -135,5 +151,7 @@ ...args,
         invalid,
+        invalidChoices,
       };
     },
     template: `<UiMultipleChoices
+      ref="invalidChoices"
       v-model="modelValue"
@@ -160,2 +178,15 @@ v-model:invalid="invalid"
       const invalid = ref(args.initInvalid);
+      const invalidChoices = ref(null);
+
+      const handleSubmit = async () => {
+        const { focusInvalidInput } = focusOnInvalidChoice(invalidChoices);
+
+        // Note: Two nextTick functions are required to focus on the first invalid input after page load.
+        await nextTick();
+        await nextTick();
+        focusInvalidInput();
+      };
+
+      handleSubmit();
+
       return {
@@ -166,5 +197,7 @@ ...args,
         invalid,
+        invalidChoices,
       };
     },
     template: `<UiMultipleChoices
+      ref="invalidChoices"
       v-model="modelValue"
@@ -471,2 +504,15 @@ v-model:invalid="invalid"
       const invalid = ref(args.initInvalid);
+      const invalidChoices = ref(null);
+
+      const handleSubmit = async () => {
+        const { focusInvalidInput } = focusOnInvalidChoice(invalidChoices);
+
+        // Note: Two nextTick functions are required to focus on the first invalid input after page load.
+        await nextTick();
+        await nextTick();
+        focusInvalidInput();
+      };
+
+      handleSubmit();
+
       return {
@@ -477,5 +523,7 @@ ...args,
         invalid,
+        invalidChoices,
       };
     },
     template: `<UiMultipleChoices
+      ref="invalidChoices"
       v-model="modelValue"
@@ -482,0 +530,0 @@ v-model:invalid="invalid"

src/utilities/helpers/index.ts

@@ -5,1 +5,2 @@ export * from './capitalize-first/index';
 export * from './equal/index';
+export * from './focus-on-first-invalid-choice/index';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2240644

increased by0.09%

Number of package files

418

increased by0.24%

Lines of code

25184

increased by0.19%

No dependency changes