Pointer Events

Use the pointer-events-none utility to make an element ignore pointer events, like :hover and click events.

The playground demo autofocuses the right-hand input to visually demonstrate the post-click state: clicking the search icon in the pointer-events-auto card is captured by the icon (input stays unfocused); clicking the pointer-events-none icon passes through to the input, which receives focus.

Style('relative ...', children: [
  Style('pointer-events-auto flex items-center pl-3', children: [
    // ...
  ]),
  TextField(),
])
Style('relative ...', children: [
  Style('pointer-events-none flex items-center pl-3', children: [
    // ...
  ]),
  TextField(),
])

The pointer events will still trigger on child elements and pass-through to elements that are “beneath” the target.

Class reference

Class	Description
pointer-events-auto	Element responds to pointer events normally
pointer-events-none	Element ignores pointer events (clicks pass through)