fix(maz-ui): MazPhoneNumberInput - auto-fill

LouisMazel · Oct 2, 2024 · 9533d0f · 9533d0f
1 parent b6f7124
commit 9533d0f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git a/packages/lib/components/MazPhoneNumberInput.vue b/packages/lib/components/MazPhoneNumberInput.vue
@@ -56,6 +56,15 @@ const props = withDefaults(defineProps<Props>(), {
   excludeSelectors: undefined,
   orientation: 'responsive',
   searchThreshold: 0.75,
+  countrySelectAttributes: () => ({
+    name: 'country',
+    autocomplete: 'off',
+  }),
+  phoneInputAttributes: () => ({
+    name: 'phone',
+    autocomplete: 'tel',
+    inputmode: 'tel',
+  }),
 })
 
 const emits = defineEmits<{
@@ -179,6 +188,16 @@ export interface Props {
    * @values "row" | "col" | "responsive"
    */
   orientation?: 'row' | 'col' | 'responsive'
+  /**
+   * Meta attributes of the country input
+   * @default {Record<string, unknown>} { autocomplete: 'off', name: 'country' }
+   */
+  countrySelectAttributes?: Record<string, unknown>
+  /**
+   * Meta attributes of the phone number input
+   * @default {Record<string, unknown>} { autocomplete: 'tel', name: 'phone', inputmode: 'tel' }
+   */
+  phoneInputAttributes?: Record<string, unknown>
 }
 
 const { fetchCountryCode, sanitizePhoneNumber, getBrowserLocale } = useMazPhoneNumberInput()
@@ -421,6 +440,7 @@ watch(
     <CountrySelector
       v-if="!noCountrySelector"
       :id="instanceId"
+      v-bind="countrySelectAttributes"
       :model-value="selectedCountry"
       :color
       :size
@@ -476,12 +496,12 @@ watch(
       :id="instanceId"
       ref="PhoneInputRef"
       :model-value="phoneNumber"
+      v-bind="{ ...$attrs, ...phoneInputAttributes }"
       :color
       :size
       :no-example
       block
       :disabled
-      v-bind="$attrs"
       :has-radius="!noCountrySelector"
       :success="success || (!noValidationSuccess ? results.isValid : false)"
       :error="error || (!noValidationError ? !!phoneNumber && !results.isValid : false)"

diff --git a/packages/lib/components/MazPhoneNumberInput/CountrySelector.vue b/packages/lib/components/MazPhoneNumberInput/CountrySelector.vue
@@ -136,7 +136,7 @@ async function focusCountrySelector() {
       :id="`country-selector-${id}`"
       ref="CountrySelectorRef"
       :model-value="modelValue"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs }"
       class="m-country-selector__select"
       option-value-key="iso2"
       option-label-key="name"

diff --git a/packages/lib/components/MazPhoneNumberInput/PhoneInput.vue b/packages/lib/components/MazPhoneNumberInput/PhoneInput.vue
@@ -134,8 +134,6 @@ onMounted(() => {
     :error
     :size
     :success
-    type="tel"
-    inputmode="tel"
     class="m-phone-input"
     :class="[
       {

diff --git a/packages/lib/components/MazSelect.vue b/packages/lib/components/MazSelect.vue
@@ -108,6 +108,11 @@ export interface Props<T extends ModelValueSimple, U extends MazSelectOption> {
   block?: boolean
   /** The exclude selectors for the v-closable directive - will exclude the elements from the directive */
   excludeSelectors?: string[]
+  /**
+   * The autocomplete attribute of the input
+   * @default 'off'
+   */
+  autocomplete?: string
 }
 
 defineOptions({
@@ -133,6 +138,7 @@ const props = withDefaults(defineProps<Props<T, U>>(), {
   excludeSelectors: undefined,
   searchPlaceholder: 'Search in options',
   searchThreshold: 0.75,
+  autocomplete: 'off',
 })
 
 const emits = defineEmits<{
@@ -644,9 +650,9 @@ function updateValue(inputOption: NormalizedOption, mustCloseList = true) {
       :border-active="listOpened"
       :color="color"
       :model-value="mazInputValue"
-      autocomplete="off"
       :size="size"
       block
+      :autocomplete
       :disabled="disabled"
       @focus.prevent.stop="openList"
       @blur.prevent.stop="closeList"
@@ -691,6 +697,7 @@ function updateValue(inputOption: NormalizedOption, mustCloseList = true) {
           :color="color"
           :placeholder="searchPlaceholder"
           name="search"
+          inputmode="search"
           autocomplete="off"
           tabindex="-1"
           class="m-select-list__search-input maz-flex-none"