Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don’t add onclick listener to React root #13778

Merged
merged 6 commits into from
Oct 9, 2018
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 37 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMComponent-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2659,4 +2659,41 @@ describe('ReactDOMComponent', () => {
document.body.removeChild(container);
}
});

describe('iOS Tap Highlight', () => {
it('adds onclick handler to elements with onClick prop', () => {
const container = document.createElement('div');

const elementRef = React.createRef();
function Component() {
return <div ref={elementRef} onClick={() => {}} />;
}

ReactDOM.render(<Component />, container);
expect(typeof elementRef.current.onclick === 'function').toBeTruthy();
});

it('adds onclick handler to a portal root', () => {
const container = document.createElement('div');
const portalContainer = document.createElement('div');

function Component() {
return ReactDOM.createPortal(<div onClick={() => {}} />, portalContainer);
}

ReactDOM.render(<Component />, container);
expect(typeof portalContainer.onclick === 'function').toBeTruthy();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can just do expect(typeof ...).toBe('function'). Not that it matters.

});

it('does not add onclick handler to the React root', () => {
const container = document.createElement('div');

function Component() {
return <div onClick={() => {}} />;
}

ReactDOM.render(<Component />, container);
expect(typeof container.onclick === 'function').toBeFalsy();
});
});
});
12 changes: 10 additions & 2 deletions packages/react-dom/src/client/ReactDOMHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -341,8 +341,16 @@ export function appendChild(
parentInstance.appendChild(child);
}

type DOMContainer =
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can also export this type from ReactDOM if that makes more sense.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would make more sense than duplicating to me.

| (Element & {
_reactRootContainer: ?{},
})
| (Document & {
_reactRootContainer: ?{},
});

export function appendChildToContainer(
container: Container,
container: DOMContainer,
child: Instance | TextInstance,
): void {
let parentNode;
Expand All @@ -360,7 +368,7 @@ export function appendChildToContainer(
// event exists. So we wouldn't see it and dispatch it.
// This is why we ensure that containers have inline onclick defined.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we modify the comments together?

// https://github.com/facebook/react/issues/11918
if (parentNode.onclick === null) {
if (!container._reactRootContainer && parentNode.onclick === null) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Compare to null and undefined explicitly, plz

// TODO: This cast may not be sound for SVG, MathML or custom elements.
trapClickOnNonInteractiveElement(((parentNode: any): HTMLElement));
}
Expand Down