onFocus event for <input> not working inside WebComponent #28

benrbray · 2020-03-27T02:35:31Z

I want to use React inside the Shadow DOM of a web component. I'm calling retargetEvents on the shadow root, but unfortunately the onFocus event still isn't working as expected. However, other events like onClick are working just fine. Minimal working example below. (Using TypeScript 3.8.3, React 16.13, Parcel 1.12.4, react-shadow-dom-retarget-events 1.0.11).

Expected Behavior: When receiving focus, both text inputs should print a message to the console.

Actual Behavior: Only the input NOT inside a web component correctly prints the message. The input inside the web component does not print a message on focus.

Minimal Working Example:

TSX:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { init, GridGame } from '~/GridGame';

init();

import retargetEvents from "react-shadow-dom-retarget-events";

// WebComponent
export class InputFocusElement extends HTMLElement {
	constructor() {
		super();

		let shadowRoot = this.attachShadow({ mode: "open" });
		let template = document.createElement("div");
		shadowRoot.appendChild(template);

		ReactDOM.render(
			<InputFocusMWE />,
			template
		);

		// react-shadow-dom-retarget-events
		retargetEvents(shadowRoot);
	}
}

// React Component
interface IProps { }
class InputFocusMWE extends React.Component<IProps> {
	constructor(props: IProps) {
		super(props);
	}

	render() {
		return (
			<input
				type="text"
				onFocus={(evt) => { console.log("focus"); }}
				onClick={(evt) => { console.log("click"); }}
			/>
		);
	}
}

customElements.define("input-mwe", InputFocusElement);

ReactDOM.render(
	<InputFocusMWE />,
	document.getElementById("no-component")
);

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello React!</title>
	</head>
	<body>
		<div>with component:</div>
		<input-mwe></input-mwe>
		<div>without component</div>
		<div id="no-component"></div>
		<script src="./index.tsx"></script>
	</body>
</html>

The text was updated successfully, but these errors were encountered:

sTsaturian · 2021-03-06T03:05:58Z

In case anyone is still facing this problem, this happens because the onFocusIn event is not retargeted. It needs to be handled in the same way as onFocusOut.

minsohng · 2021-04-01T21:42:40Z

In case anyone is still facing this problem, this happens because the onFocusIn event is not retargeted. It needs to be handled in the same way as onFocusOut.

what's the way that handled onFocusOut? I am trying to fix onFocus issue as well.

sTsaturian · 2021-04-01T22:34:32Z

what's the way that handled onFocusOut? I am trying to fix onFocus issue as well.

The easiest fix is to add onFocusIn here, and onFocusIn: 'onFocus', here.
Ot upgrade React to 17.x and eliminate the need for using the package.

jlap pushed a commit to jlap/react-shadow-dom-retarget-events that referenced this issue Nov 26, 2021

Fix spring-media#28 focusIn event.

5479991

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

onFocus event for <input> not working inside WebComponent #28

onFocus event for <input> not working inside WebComponent #28

benrbray commented Mar 27, 2020

sTsaturian commented Mar 6, 2021

minsohng commented Apr 1, 2021

sTsaturian commented Apr 1, 2021 •

edited

Loading

onFocus event for <input> not working inside WebComponent #28

onFocus event for <input> not working inside WebComponent #28

Comments

benrbray commented Mar 27, 2020

sTsaturian commented Mar 6, 2021

minsohng commented Apr 1, 2021

sTsaturian commented Apr 1, 2021 • edited Loading

sTsaturian commented Apr 1, 2021 •

edited

Loading