Console error when turning on device emulation in Chrome

[ryo-hisano]

🐛 Bug report

When I turn on emulation of device in Desktop Chrome and click the radio button and checkbox, I get the error "Unable to prevent Default inside passive event listener invocation."

This error does not occur when emulation is turned off.
The same problem occurs when you actually create a React app locally.

Also, there is no real harm, only a Chrome Console error occurs.

💻 Link to reproduction

Radio - Chakra UI

Checkbox - Chakra UI

📝 Additional information

• Screenshots or code

Turn on device emulation

Turn off device emulation

[Meansereirith]

I'm having this same issue. Please let me know when you found any quick solution

[segunadebayo]

Considering this isn't a real issue, permit me to close it.

I can't seem to reproduce this though and I doubt if it's coming from Chakra UI itself. If it becomes a real blocker to your project, feel free to let us know.

Cheers.

[hiroppy]

hm, I'm facing this issue when I use Radio component. @segunadebayo would you reopen this issue?

[dodas]

Hey @hiroppy, could you provide a reproduction, please?

[hiroppy]

yep, thanks. I'll prepare it soon.

[srflp]

Hey, this bug still exists.

Steps to reproduce:

1. Open one of the following links to be able to interact with the Checkbox or Radio component.

• simple reproduction on codesandbox
• https://chakra-ui.com/docs/form/checkbox
• https://chakra-ui.com/docs/form/radio

2. Turn on Chrome devtools.
3. Turn on "device toolbar" by clicking "Toogle device toolbar" button (upper-left corner of devtools).
4. Click on label of Checkbox or Radio component.
5. Each click should trigger the following error:

I'm testing it on the latest Chrome (Chrome 89, Windows 10).

Text form:

Unable to preventDefault inside passive event listener invocation.

In CodeSandbox, the stack trace points to this function being invoked by callAllHandlers:

chakra-ui/packages/checkbox/src/use-checkbox.ts

Lines 364 to 370 in 5274a31

	/**
	* Prevent `onBlur` being fired when the checkbox label is touched
	*/
	function stopEvent(event: React.SyntheticEvent) {
	event.preventDefault()
	event.stopPropagation()
	}

chakra-ui/packages/utils/src/function.ts

Lines 11 to 20 in 5274a31

	export function callAllHandlers<T extends (event: any) => void>(
	...fns: (T | undefined)[]
	) {
	return function func(event: FunctionArguments<T>[0]) {
	fns.some((fn) => {
	fn?.(event)
	return event?.defaultPrevented
	})
	}
	}

[cppng]

This issues still persit

[jaredLo]

Hey, this bug still exists.

Steps to reproduce:

1. Open one of the following links to be able to interact with the Checkbox or Radio component.

• simple reproduction on codesandbox
• https://chakra-ui.com/docs/form/checkbox
• https://chakra-ui.com/docs/form/radio

1. Turn on Chrome devtools.
2. Turn on "device toolbar" by clicking "Toogle device toolbar" button (upper-left corner of devtools).
3. Click on label of Checkbox or Radio component.
4. Each click should trigger the following error:

I'm testing it on the latest Chrome (Chrome 89, Windows 10).

Text form:

Unable to preventDefault inside passive event listener invocation.

In CodeSandbox, the stack trace points to this function being invoked by callAllHandlers:

chakra-ui/packages/checkbox/src/use-checkbox.ts

Lines 364 to 370 in 5274a31

	/**
	* Prevent `onBlur` being fired when the checkbox label is touched
	*/
	function stopEvent(event: React.SyntheticEvent) {
	event.preventDefault()
	event.stopPropagation()
	}

chakra-ui/packages/utils/src/function.ts

Lines 11 to 20 in 5274a31

	export function callAllHandlers<T extends (event: any) => void>(
	...fns: (T | undefined)[]
	) {
	return function func(event: FunctionArguments<T>[0]) {
	fns.some((fn) => {
	fn?.(event)
	return event?.defaultPrevented
	})
	}
	}

I'm having this problem as well, identical to this one.

[hubertkuoch]

Am not trying to necro this one, but has this one been resolved by any chance?

Not a big deal but looks like we still get this very message "Unable to prevent Default inside passive event listener invocation." when using radio buttons in emulator mode (it can be checked directly on the doc itself, by just selecting any of Naruto's character and just looking chrome dev tool console in device emulator mode).

Would be glad to hear any workaround if any, tks.

[MarcLongJoyride]

Can this please be reopened? We are having this issue on our site as well.

[dayoolacodes]

this issue still persists. check https://chakra-ui.com/docs/form/checkbox and open your browser's console.

[oncet]

Having this error after selecting a Radio component.

vendor.89ffc88f.js:27 Unable to preventDefault inside passive event listener invocation.

[matthewrose]

For those still experiencing this error: The issue is happening because the components' label element needs the following style: touch-action: none. I added it as a global style for now in my theme. See: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

[yaniv691]

Still happening in Feb 2022... is there an ETA on when this is going to be resolved?

[rishm17]

Did anyone manage to resolve this?

[dodas]

Is this actually causing some issues, or is it just an error in the console?

[oncet]

Is this actually causing some issues, or is it just an error in the console?

I think it's just a warning/error in the console, I haven't found this to cause any issues.

[matthewrose]

It's a simple fix though. Here's where the style I referenced above could be added to fix the issue if that helps:

chakra-ui/packages/checkbox/src/checkbox.tsx

Line 29 in 9747c53

const Label = chakra("label", {

[darwinva97]

Same: Did anyone manage to resolve this?

[Chukwuamaka]

Is this actually causing some issues, or is it just an error in the console?

In emulator mode, it prevents my form submit API call from going through. I also noticed that for checkboxes, the error only occurs when you click on the text part of the checkbox. Clicking directly on the box does not trigger the error.

I hope the issue will be reopened and eventually resolved.

[egurinko]

For those still experiencing this error: The issue is happening because the components' label element needs the following style: touch-action: none. I added it as a global style for now in my theme. See: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

As @matthewrose explained, label component needs touch-action style.
For quick fix, customizing theme is easy to suppress the error.

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Checkbox: { // can be Radio
      baseStyle: {
        label: {
          touchAction: 'none',
        },
      },
    },
  },
});

[regMeet]

@egurinko still not working, i'm using Radio buttons but I couldn't make it work with your solution

[matthewrose]

@regMeet and others who view this: the style should not be on not on the label part but instead the container part. Look here and you will see where styles.container is used:

chakra-ui/packages/checkbox/src/checkbox.tsx

Line 149 in 9747c53

__css={styles.container}

So the example from @egurinko should be updated to the following:

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Checkbox: { // can be Radio
      baseStyle: {
        container: {
          touchAction: 'none',
        },
      },
    },
  },
});

That being said it should be simple to fix this in the code for the component or theme in chakra-ui itself. (see my previous comment)

[alanalbertengo-santex]

@matthewrose still not working for me when using mobile web view and Radio component and clicking on the Radio's label

[matthewrose]

Update: I realize now after further testing that the touch-action fix is not removing this violation in all cases for me. After digging deeper it seems that the issue is due to preventDefault being called from a "passive" event listener, which is unnecessary and incorrect.

React uses passive event listeners for onTouchStart, onTouchMove, and onWheel events. (Read: facebook/react#19654)

So I now suspect the fix for chakra is needed here, in the stopEvent function of use-checkbox.ts: https://github.com/chakra-ui/chakra-ui/blob/main/packages/checkbox/src/use-checkbox.ts#L341

What I'm saying is we should not be using preventDefault for these and other passive events. So in that code, we should check to make sure the event is not passive (as React uses for onTouchStart, onTouchMove, and onWheel) and prevent the call to preventDefault in those cases.

[poomthiti]

ran into this issue recently for the radio component, my solution is to add pointerEvents: "none" css to the label part

const Radio: ComponentStyleConfig = {
  baseStyle: {
    label: {
      pointerEvents: "none",
    },
  }
}

Seems to be working fine at the moment

[gustavolzangelo]

ran into this issue recently for the radio component, my solution is to add pointerEvents: "none" css to the label part

const Radio: ComponentStyleConfig = {
  baseStyle: {
    label: {
      pointerEvents: "none",
    },
  }
}

Seems to be working fine at the moment

This one worked for me

[niels-k-86]

This is still a problem in the latest version.

If I use a Checkbox or Radio button within a Modal, it prevents touch scrolling. This is a major issue as far as I'm concerned and this ticket should be reopened.

This fix prevents touch scrolling on all radio buttons, thus it is not a solution:

const Radio: ComponentStyleConfig = {
  baseStyle: {
    label: {
      pointerEvents: "none",
    },
  }
}

[maliheNoroozi]

I'm using Radio buttons and checkbox. When clikcing on their labels, I am having this issue.
Can this please be reopeneded?

[ordep2v]

I solved my problem, in 2023 this bug still happens. When i clicked in radio input option, this error returns "Unable to preventDefault inside passive event listener invocation.".

How to solve?

Go to ur global styles in chakra and add "pointer-events: none;". PS: In my chakra version, this is the current className of span in Radio component, you need to evaluate if it's the same.