[Input]: [Cannot enter space or Enter when the Input is rendered within the Tree]

[jamesPodo]

Describe the bug

cannot type space on input field when the Input is rendered in Tree.
There was a similar issue on Header Input with List.
#4049
Could you please fix the issue? Thank you!

Isolated Example

No response

Reproduction steps

...

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

1.16.0

UI5 Web Components Version

1.14.0

Browser

Chrome

Operating System

Mac

Additional Context

No response

Relevant log output

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @jamesPodo

you have to prevent the keydown event from bubbling up to the Tree/TreeItemCustom. (See here)

I'm not sure if this should be handled by the component itself (since propagation is standard JS event behavior), so I'm transferring this issue to the ui5-webcomponents repo, as the affected components are developed there.

---

Hi colleagues,
could you please take a look at this issue? You can find a codeSandbox using ui5wc without our wrapper here.

[NHristov-sap]

Hello @ui5-webcomponents-topic-rl,
I am forwarding this issue to you as the reported issue is reproducible. There is solution proposal by @Lukas742 , but please check if this can be done in the component itself.

Best Regards,
Nikolay Hristov

[jamesPodo]

Hi, the workaround worked for me, but I wonder if this is expected behaviour when the input is rendered in tree list? because it seems the event is being not propagated due to keyboard supports in tree component. Thank you!

[niyap]

Hello @SAP/ui5-webcomponents-topic-p,

The issue is caused by the ListItem which is inherited by the TreeItem. If you look at the _onkeydown method of the component, e.preventDefault(); is called both on SPACE and ENTER key.

The issue could be easily reproduced in the CodeSandbox provided, as well as if you enhance the ui5-tree test page by adding a input field within a custom item.

Similar issue: #4049

Could you please look over?

Kind Regards,
Niya