feat: add inputAutofocus props

ICIJ · Aug 27, 2024 · a51ecc7 · a51ecc7
1 parent d3e8c6c
commit a51ecc7
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 6 deletions.
diff --git a/.storybook/utils.js b/.storybook/utils.js
@@ -33,3 +33,23 @@ export const entityCategoriesArgType = {
   control: 'select',
   options: ENTITY_CATEGORIES
 }
+export const inputTypeArgType = {
+  control: 'select',
+  options: [
+    'text',
+    'number',
+    'email',
+    'password',
+    'search',
+    'url',
+    'tel',
+    'date',
+    'time',
+    'range',
+    'color',
+    'datetime',
+    'datetime-local',
+    'month',
+    'week'
+  ]
+}
diff --git a/src/components/AppModal/AppModalPrompt.vue b/src/components/AppModal/AppModalPrompt.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { useAttrs, useSlots } from 'vue'
+import { nextTick, ref, useAttrs, useSlots, watch } from 'vue'
 
 import AppModal from './AppModal'
 const inputValue = defineModel('inputValue', { type: String, required: true })
 const modelValue = defineModel({ type: Boolean, required: true })
-defineProps({
+const props = defineProps({
   inputType: {
     type: String,
     default: 'text'
@@ -25,8 +25,13 @@ defineProps({
   },
   inputInvalidFeedback: {
     type: String
+  },
+  inputAutofocus: {
+    type: Boolean,
+    default: false
   }
 })
+const inputModal = ref(null)
 // Retrieve all slots passed to AppModalPrompt to pass them to AppModal
 const slots = useSlots()
 const slots_ = Object.fromEntries(Object.entries(slots).filter(([name]) => name !== 'default'))
@@ -36,6 +41,18 @@ const emits = defineEmits(['submit'])
 const onOk = () => {
   emits('submit', { value: inputValue.value })
 }
+watch(modelValue, (show) => {
+  if (props.inputAutofocus === true && show === true) {
+    focusInput()
+  }
+})
+const focusInput = () => {
+  if (inputModal.value) {
+    nextTick(() => {
+      inputModal.value.focus()
+    })
+  }
+}
 </script>
 
 <template>
@@ -53,7 +70,13 @@ const onOk = () => {
           :invalid-feedback="inputInvalidFeedback"
           :state="inputState"
         >
-          <b-form-input id="input-1" v-model="inputValue" :type="inputType" :placeholder="inputPlaceholder" />
+          <b-form-input
+            id="input-1"
+            ref="inputModal"
+            v-model="inputValue"
+            :type="inputType"
+            :placeholder="inputPlaceholder"
+          />
         </b-form-group>
         <p class="text-secondary-emphasis">
           <slot name="description">{{ description }}</slot>

diff --git a/src/stories/components/AppModal/AppModalPrompt.stories.js b/src/stories/components/AppModal/AppModalPrompt.stories.js
@@ -1,4 +1,4 @@
-import { breakpointSizeArgType } from '~storybook/utils'
+import { breakpointSizeArgType, inputTypeArgType } from '~storybook/utils'
 import AppModalPrompt from '@/components/AppModal/AppModalPrompt'
 import ImageModeSource from '@/components/ImageMode/ImageModeSource'
 import image from '@/assets/images/illustrations/app-modal-default-light.svg'
@@ -9,13 +9,15 @@ export default {
   tags: ['autodocs'],
   component: AppModalPrompt,
   argTypes: {
-    size: breakpointSizeArgType
+    size: breakpointSizeArgType,
+    inputType: inputTypeArgType
   },
   args: {
     image,
     imageDark,
     modelValue: false,
-    inputValue: 'test'
+    inputValue: 'test',
+    inputAutofocus: false
   },
   render(args) {
     return {
@@ -54,6 +56,17 @@ export const Default = {
     description: 'You will find your saved searches in the left menu in Explore > Saved Searches'
   }
 }
+export const Autofocus = {
+  args: {
+    title: 'Name your saved search',
+    okTitle: 'Save search',
+    cancelTitle: 'Cancel',
+    inputValue: '',
+    inputAutofocus: true,
+    inputPlaceholder: 'Type here',
+    description: 'You will find your saved searches in the left menu in Explore > Saved Searches'
+  }
+}
 export const InputError = {
   args: {
     title: 'Name your alert',