No Focus possible in <n-input>/<input> inside <n-modal> possible ?!

[TheFreeman]

Hi guys!

I have a few n-input-number fields as content of a n-modal as template. However, now I can't put a cursor, or focus, in the fields. :-(

If i put this fields to the outside of the n-modal, then it works fine. :-)

I don't understand why this is so.
Can you guys help me please?

Here my template code:

<template>
   <n-modal
        v-model:show="showSerialForm"
        :mask-closable="false"
        :title="blabla title"
        :preset="'dialog'"
        :show-icon="false"
        :positive-text="'OK'"
        @positive-click="showSerialForm = false"
        @negative-click="showSerialForm = false"
        :negative-text="'NOK'"
    >
        <div class="d-flex flex-row mt-3 mb-2 align-items-center">
            <label class="serial-form-label">some label</label>
            <n-input-number
                v-model:value="serialIntervalInWeeks"
                :validator="serialValidateWeekInterval"
            />
        </div>
        <div class="d-flex flex-row mb-2 align-items-center">
            <label class="serial-form-label">some label</label>
            <n-input-number
                v-model:value="serialEndCalendarWeek"
                :validator="serialValidateCalendarWeek"
            />
        </div>
        <div class="d-flex flex-row align-items-center">
            <label class="serial-form-label">some label</label>
            <n-input-number
                v-model:value="serialEndCalendarYear"
                :validator="serialValidateCalendarYear"
            />
        </div>
    </n-modal>
</template>

This are the properties, generated inside the n-input-number:

props: {
bordered:undefined,
builtinThemeOverrides:undefined,
clearable:false,
defaultValue:null,
disabled:undefined,
keyboard:Object (empty),
loading:undefined,
max:undefined,
min:undefined,
onBlur:undefined,
onChange:undefined,
onClear:undefined,
onFocus:undefined,
onUpdate:value:f ($event),
onUpdateValue:f bound serialAskApiForDates(),
placeholder:undefined,
readonly:false,
showButton:true,
size:undefined,
step:1,
theme:undefined,
themeOverrides:undefined,
updateValueOnInput:true,
validator:f bound serialValidateWeekInterval(),
value:12
}

NPMs:

"vue": "^3.2.26"
"naive-ui": "^2.25.1"

Thank you in advance! :-)

[TheFreeman]

Here some more structure information:

[TheFreeman]

One further information/question:
I recognized, that on every click (mouseDown) on the n-input component inside is re-rendered!
Why?

[07akioni]

I can't reproduce it.

If you are saying add or minus button cause input rendering, this is expected since input's value is changed.

[07akioni]

Which version you are using? I can't reproduce the problem.

[07akioni]

If possible please give a codesandbox or stackblitz demo.

[TheFreeman]

As i wrote above im using

"vue": "^3.2.26"
"naive-ui": "^2.25.1"

[TheFreeman]

Today I recognized, that also my N-Drawers have the same problem.
I updated before from the version "2.23.2" to the "2.25.1" and now there are this problems.
I think this is a BUG depending on the "TrapFocus" thing, you added?

[07akioni]

Yes, focus trap is an a11y friendly behavior introduced in recent version. The main problem is I can't reproduce you problem, so I can't know what happened.

[07akioni]

https://codesandbox.io/s/bold-sunset-o6tz8?file=/src/Demo.vue

[TheFreeman]

I downgraded to the version "2.53.2" and everything is working fine. :-)
Any suggestions?

[07akioni]

You may try :trap-focus="false" as a workaround.

[TheFreeman]

Thank you!
Now itś working fine. :-)