Preact: Should onFocus/onBlur bubble or not?

[maranomynet]

I'm confused about whether onFocus/onBlur events should bubble in preact, like they do in React.

In this example using preact 10.0.0-beta.1 they don't bubble https://codesandbox.io/embed/5wxk9zk7lx

...whereas in the Preact repl they do bubble https://preactjs.com/repl

export default () =>(
  <div onFocus={() => console.log("FOCUS")}>
    <div>
      Focus this input
      <br />
      <input />
    </div>
  </div>
);

So which example is correct Preact behavior?

If they should not bubble, then that fact really should be covered on the Differences to React page

... or even receive its own page about events and how onChange is different and how only some DOM event prop names may be camelCased (onClick), while others must be lowercased (like: onfocusin)

Then also the REPL should be fixed to behave like "normal" Preact.

[maranomynet]

Related to #1611

[JoviDeCroock]

At this moment the Repl is showing the latest stable version of Preact (and so are the docs), 10 is still in beta and this could be a quirk that we should fix. Thanks for making us aware.

[maranomynet]

@JoviDeCroock But the plot thickens:

It seems the same with [email protected] https://codesandbox.io/s/4qvw991wk9

[maranomynet]

...and with [email protected] https://codesandbox.io/s/4jylo618q0

No bubbling of onFocus

[maranomynet]

However I see onFocus bubbling in [email protected] – but not after that.

[robertknight]

Given that there are native focusin and focusout events which do bubble, I think the behaviour in keeping with the "closer to the metal" philosophy would be to avoid special-casing this event and require use of onFocusIn or onFocusOut props if users want bubbling.

A counter-argument is React compatibility if there are important third-party components which rely on the behaviour of onFocus. Potentially that could be addressed in the preact/compat package though.

[maranomynet]

I think that approach/attitude would make sense.

But the feature of onFocus/onBlur not bubbling would have to be retrofitted into the Changelog as breaking changes in version 8.0.0.

Additionally Preact's "close to the metal" event model would need to be documented a whole lot better than it is today.
I love Preact's hands-off approach to onChange, for example, but it's frustrating to have to figure it out the hard way when your React-influenced components "don't work".

[robertknight]

The change to the behaviour of onFocus and onBlur happened in https://github.com/developit/preact/commit/727f0360c72a933eb46f16db73e7ef9217302d1d#diff-4935bb00e75b7854383877cbfd9d770f. I haven't checked the changelog but if it wasn't mentioned, that was an oversight.

Additionally Preact's "close to the metal" event model would need to be documented a whole lot better than it is today.

I agree. The section on event handling in https://preactjs.com/guide/differences-to-react is currently very brief.

[JoviDeCroock]

Hmm, so we can divide this into two issues I think?

On one hand we need to expand the docs to better reflect the differences in bubbling, ... compared to react.
On the other hand we should discuss whether or not we should also have this behavior in compat (personally think this would produce a lot of bundle size)

[robertknight]

On the other hand we should discuss whether or not we should also have this behavior in compat

I don't know if there are any already agreed-upon criteria for how far preact/compat should go to emulate React. A suggestion I have is that it would depend on whether the behaviour is critical for a popular third-party library, since that is a major use case for using preact/compat and the one where the app developer can't just make a simple change to their own code.

[developit]

The REPL is using Preact 7.

[developit]

I think this behaviour got introduced by accident as a side effect of supporting on**Capture events.

FWIW a compat fix would be to transform props.onFocus to props.onFocusCapture.

[taurheim]

I have an issue exactly as @robertknight describes where we are using a 3rd party library that does not work due to onFocus not bubbling.

Is this planned to be fixed? or considered to be a "Difference to react"?