Open
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Stencil Version
4.5.23
Stencil Framework Output Target
React
Stencil Framework Output Target Version
0.8.2
Current Behavior
I have some components that use delegatesFocus. When using the library react output target with the SSR target, the component's shadowRoot.delegateFocus is changed to false. As a result I cannot programmatically call focus() on it (silently fails since the focusable element is inside the shadow).
Expected Behavior
I would expect the delegatesFocus to remain true as initially specified. This works as expected in React non-SSR scenario.
Steps to Reproduce
Create a component with delegatesFocus:
import { Component, h } from '@stencil/core';
@Component({
tag: 'my-button',
styleUrl: 'my-button.css',
shadow: { delegatesFocus: true },
})
export class MyButton {
render() {
return (<div><button><slot></slot></button></div>);
}
}
Consume it in React SSR app:
export function App() {
return (
<div>
<MyButton>My Custom Button</MyButton>
</div>
);
}
Inspect MyButton component, and shadowRoot.delegatesFocus is set to false.
Code Reproduction URL
https://github.com/jeeyun/nx-stencil
Additional Information
No response