Release 5.8.18

### Changelog:
* Feature(frontend): Set `inputmode` in `TagsSelector`.
* Fix(frontend): `TagsSelector` enter button was not visible on phones.
* Fix(frontend): Country code selector in phone field.
* Fix(frontend): Fk field focus inside modal.
* Fix(frontend): Invalid value in number field.

Closes: vst/vst-utils#618+
Closes: vst/vst-utils#619+
Closes: vst/vst-utils#621+

See merge request vst/vst-utils!619

frontend_src/vstutils/components/TagsSelector.vue

@@ -13,7 +13,14 @@
             </button>
             {{ item }}
         </li>
-        <input ref="input" class="field" type="text" @keyup.enter="add($refs.input.value)" />
+        <input
+            ref="input"
+            class="field"
+            type="text"
+            enterkeyhint="enter"
+            :inputmode="inputmode"
+            @keyup.enter="add($refs.input.value)"
+        />
     </ul>
 </template>
 
@@ -24,6 +31,7 @@
         value: { type: Array, default: () => [] },
         unique: { type: Boolean, default: false },
         validator: { type: Function, default: (value) => value || undefined },
+        inputmode: { type: String, default: 'text' },
     });
     const emit = defineEmits(['change']);
 

frontend_src/vstutils/fields/array/custom/number.ts

@@ -16,6 +16,7 @@ export const NumberArrayFieldEdit = defineComponent({
     data() {
         return {
             itemsValidator: validateNumber,
+            inputmode: 'decimal',
         };
     },
 });
@@ -41,6 +42,7 @@ export const IntegerArrayFieldEdit = defineComponent({
     data() {
         return {
             itemsValidator: validateInteger,
+            inputmode: 'numeric',
         };
     },
 });

frontend_src/vstutils/fields/array/custom/string.ts

@@ -22,6 +22,7 @@ export const StringArrayFieldEdit = defineComponent({
     data() {
         return {
             itemsValidator: undefined,
+            inputmode: undefined,
         };
     },
     render() {
@@ -31,6 +32,7 @@ export const StringArrayFieldEdit = defineComponent({
                     value: this.value || [],
                     unique: this.field.uniqueItems,
                     validator: this.itemsValidator,
+                    inputmode: this.inputmode,
                 },
                 on: { change: (items: unknown[]) => this.$emit('set-value', items) },
                 class: 'tags-selector',

frontend_src/vstutils/fields/fk/fk/FKFieldContentEditable.vue

@@ -51,6 +51,9 @@
             $(this.selectEl!).off().select2('destroy');
         },
         methods: {
+            getSelectContainer() {
+                return this.$el;
+            },
             /**
              * Method, that mounts select2 to current field's select.
              */
@@ -66,6 +69,7 @@
                         },
                         allowClear: this.field.nullable,
                         placeholder: { id: undefined, text: '' },
+                        dropdownParent: $(this.getSelectContainer()),
                     })
                     .on('change', () => {
                         // @ts-expect-error Select2 has no types

frontend_src/vstutils/fields/numbers/number.js

@@ -7,7 +7,7 @@ export const NumberFieldContentMixin = {
             if (this.field.isValueValid(value)) {
                 this.$emit('set-value', value);
             } else {
-                this.$refs.input.value = this.value;
+                this.$refs.input.value = this.value ?? '';
             }
         },
     },

frontend_src/vstutils/fields/text/PhoneFieldContentEdit.vue

@@ -6,7 +6,7 @@
             </div>
         </div>
         <component
-            :is="countryCodeField.component"
+            :is="countryCodeField.getComponent()"
             class="code-selector"
             :field="countryCodeField"
             :data="{ [countryCodeField.name]: countryCode }"

frontend_src/vstutils/fields/text/__tests__/phone-field.test.ts

@@ -0,0 +1,30 @@
+import { expect, test, describe } from '@jest/globals';
+import { createApp, createSchema, mount } from '@/unittests';
+
+describe('PhoneField', () => {
+    test('country code selector is rendered', async () => {
+        const app = await createApp({
+            schema: createSchema(),
+        });
+
+        const phoneField = app.fieldsResolver.resolveField({
+            name: 'phone',
+            type: 'string',
+            format: 'phone',
+        });
+
+        const wrapper = mount({
+            template: '<PhoneField :field="field" :data="{}" type="edit" />',
+            components: {
+                PhoneField: phoneField.getComponent(),
+            },
+            setup() {
+                return {
+                    field: phoneField,
+                };
+            },
+        });
+
+        expect(wrapper.find('select').exists()).toBeTruthy();
+    });
+});

vstutils/__init__.py

@@ -1,2 +1,2 @@
 # pylint: disable=django-not-available
-__version__: str = '5.8.17'
+__version__: str = '5.8.18'