I'm submitting a...

• Bug report

Current behavior

The labels of the Native inputs are not pronounced by screen readers like NVDA.

Expected behavior

The labels of the Native inputs should be pronounced by the screen readers.

Minimal reproduction of the problem with instructions

1. Open https://www.telerik.com/kendo-vue-ui/components/inputs/input/forms/
2. Start the NVDA screen reader
3. Select an Input field in the first example. The label of the selected field will not be announced.

I'm submitting a...

• Bug report

Current behavior

The value of the Native Input is updating the model after the input is focused out. It behaves as the lazy modifier is applied to it. The reported behavior is replicable only in Vue 3.

Expected behavior

The value of the model the Input is bound to should be updated on every user input as can be observed in this StackBlitz example.

Minimal reproduction of the problem with instructions

1. Open this StackBlitz project
2. Enter random symbols in the Input

The model is updated when you focus out the Input

I'm submitting a...

• Bug report

Current behavior

Get a NumericTextbox with currency formatting. If one clicks on the input of the component in the area in front of the currency sign, the caret is positioned before this currency sign. Once the caret is positioned in front of the currency sign, the first entered number won't be applied to the component if you start entering numbers from the keyboard.

Expected behavior

When the user enters a number through the keyboard, all its digits should be applied to/accepted by the component, no matter the position of the caret.

Minimal reproduction of the problem with instructions

1. Open this StackBlitz example.
2. Position the caret before the dollar sign in the input
3. Enter 123 with the keyboard
4. The applied number is 23 instead of 123

Describe the bug
The "keyup" event is triggered two times

To Reproduce

1. Open this StackBlitz example
2. Click on the Input
3. Press enter and check the browser's console

Expected behavior
The event should be triggered once per button press.

Currently, the different Kendo UI for Vue Native Inputs have the label property that adds a Floating label to the selected component. By defining a Floating label, the only way we can position it above the selected Input is to enter a value in the input. 

The current request is about an option that allows the developer to set the position of the Floating label above the Input, no matter if there is or isn't a value in the component.

Currently, this functionality can be achieved using the following CSS. However, it will be easier if we can control the label position with a single prop

.k-floating-label-container.k-empty > .k-label {
  top: 0;
  left: 0;
}

Describe the bug
In a scenario where there is an Input with a required value that is not set initially, the Input has an invalid state. If we then programmatically update the value of the Input, the component continues to be invalid.

To Reproduce

1. Open this StackBlitz example
2. Wait for the value of the Input to be updated

Expected behavior
Once the Input has a value, it should become a valid one.

• A possible workaround of the issue can be applied using the valid prop of the Input. Here is a StackBlitz example demonstrating the usage of the valid prop.

Screenshots

Describe the bug
https://stackblitz.com/edit/yt9rrh?file=src%2Fmain.vue
there is a warning in the console

Describe the bug
When set to "disabled", the underlying input field does not get the "disabled" attribute, so it's still editable. You cannot click on it since the wrapping span has pointer-events: none, but if you set a label for this input, you still can edit a disabled field, which is kinda no-go in terms of security.

Good thing: Updates to the disabled field do not fire an update event, which might be good or bad, depending on whether we consider security or UX.

To Reproduce

1. Open this CodeSandbox

Expected behavior
The input inside the Input component should have a disabled attribute.