Code Monkey home page Code Monkey logo

Comments (8)

sideshowbarker avatar sideshowbarker commented on May 18, 2024 5

@himanshugarg

Apologies for this.

Not your fault — mine for closing this issue prematurely.

Anyway, I’ll take this opportunity to tell you that I think the work you’ve been doing on issue triage and technical review of issues has been immensely helpful for the project — including the attention you’ve paid to getting some longstanding (and in some cases long-neglected…) issues the attention they’ve needed

from content.

himanshugarg avatar himanshugarg commented on May 18, 2024 2

Apologies for this. Thanks for your time and feedback on this issue.

from content.

jmswisher avatar jmswisher commented on May 18, 2024 1

@SetTrend Very helpful bug report! Thank you!

from content.

himanshugarg avatar himanshugarg commented on May 18, 2024

whereas with focus and blur events, the relatedTarget property is always null.

The following code sample shows that this is not true, at least not now:-

<!DOCTYPE html>
<html lang="en-US" charset="utf-8">
  <head>
  </head>
  <body>
    <form id="form">
      <input type="text" placeholder="text input">
      <input type="password" placeholder="password">
    </form>
  </body>
    <script type="text/javascript">
      const form = document.querySelector('input[type="password"]');
      
      form.addEventListener('focus', (event) => {
        event.target.style.background = 'pink';
        console.log('focus: ' + String(event.relatedTarget));
      });

      form.addEventListener('focusin', (event) => {
        event.target.style.background = '';
        console.log('focusin: ' + String(event.relatedTarget));
      });
      
      form.addEventListener('blur', (event) => {
        event.target.style.background = '';
        console.log('blur: ' + String(event.relatedTarget));
      });

      form.addEventListener('focusout', (event) => {
        event.target.style.background = '';
        console.log('focusout: ' + String(event.relatedTarget));
      });
    </script>
</html>
focus: [object HTMLInputElement] test.html:16:17
focusin: [object HTMLInputElement] test.html:21:17
blur: [object HTMLInputElement] test.html:26:17
focusout: [object HTMLInputElement] test.html:31:17

The only difference between those events as per the W3C documentation is in

  1. whether the event bubbles. This is noted in the MDN docs.
  2. the timing of event dispatch (before shifting in focusin/focusout, after in others). This is not noted in the MDN docs.

relatedTarget could be null in any of them in nested browsing contexts as that is a property of the FocusEvent interface.

What fixes, if any, should be made for this issue?

from content.

sideshowbarker avatar sideshowbarker commented on May 18, 2024

Closing for lack of response

from content.

SetTrend avatar SetTrend commented on May 18, 2024

Not so fast!

There are people out here who are working on business projects for their living, not having time to reply to you immediately just because you are having a slice of free spare time available.

You cannot come back to a ole thread after two years of idleness and expect to get a response immediately.

Please re-open.

from content.

SetTrend avatar SetTrend commented on May 18, 2024

So true.

I, on my part, will make sure to get back on this issue til end of the month.

from content.

SetTrend avatar SetTrend commented on May 18, 2024

I now tested the new behaviour of blur and focus events, as @himanshugarg suggested. Thank you for bringing this issue back up again with your very valuable information, @himanshugarg!

The behaviour of these events in regards to relatedTarget indeed has changed over time. They now both return the counterpart element, if applicable.

focus and blur relatedTarget


So, it seems like there is no difference anymore between blur/focusout and focus/focusin, respective.

Considering thorough documentation on these events:

When is focusin supposed to be preferred over focus? When is focusout supposed to be preferred over blur? Or has one of these pairs become redundant now, since both mirror each other?

from content.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.