Issue with triggering blur event in Internet Explorer while using Angular 2+

The issue discussed in the Blur not working - Angular 2 thread is relevant here.

I have a custom select shared component and I am attempting to implement a blur event to close it when the component loses focus.

// HTML

<div (blur)="closeDropDown()" tabindex="0">
  <span (click)="selectClicked()" class="placeholder">
    Select Item 
  </span>
  <div class="options">
    <ul>
       <li *ngFor="let item of data"> 
       <span>{{item}}</span></li>
    </ul>
  </div>


//TS

 selectClicked() {
   this.dropdownOpen = true;
 }

 closeDropDown() {
   this.dropdownOpen = false;
 }

I successfully added the blur event using the mentioned tabindex workaround (works in all browsers except IE). However, the blur event does not work in IE version > 10.

I attempted to use focusout instead of blur but the selected value does not get attached to the custom select and requires multiple selections to choose an option.

Why isn't the blur event triggering on the div element, and are there any alternative methods that can be used for block-level elements?

javascriptangulartypescriptinternet-explorerblur

Answer №1

After encountering an issue, I found a solution by including focusout and tabindex=-1 in a div element. However, this caused a problem where the value was not being set for my custom dropdown.

The root of the issue lied in the fact that the use of focusout resulted in the event bubbling up to the parent element, causing a delay in setting the dropdown value post-selection.

In order to rectify this issue, I realized that I had forgotten to prevent the event from propagating further. The correction involved stopping the propagation of the event.

// html
<div (focusout)="closeDropDown($event)" tabindex="-1"></div>

// ts
closeDropDown(event) {
  event.stopPropagation();
  this.dropdownOpen = false;
}

The focusout event is triggered when an element is on the brink of losing focus. One key distinction between this event and blur is that focusout bubbles while blur does not.

For more information, check out blur vs focusout -- any real differences? and https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Broadcast to every socket except the one that is malfunctioning on Socket.io

My current task involves sending a message to all connected sockets on my server using socket.io. The code I have written so far looks like this: if(electionExists) { var connectedClients = io.sockets.adapter.rooms[electionRequested].sockets; ...

javascriptnode.jsexpresssocket.io

What is the best way to apply a hover effect to a specific element?

Within my CSS stylesheet, I've defined the following: li.sort:hover {color: #F00;} All of my list items with the 'sort' class work as intended when the Document Object Model (DOM) is rendered. However, if I dynamically create a brand new ...

javascriptajaxmootools

Using NodeJS to integrate WebRTC into JavaScript applications

I am facing a challenge with my JavaScript files that I need to use for creating a WebRTC application. Unfortunately, my hosting platform does not support Node.js. I'm wondering if it's possible to modify these JS files to work without Node.js. C ...

javascriptnode.jswebrtc

What is the best way to execute multiple Protractor test suites simultaneously?

Exploring Protractor for the first time. My goal is to run multiple test suites in a sequence. I have a complex angular form with various scenarios, each with its expected results. I want to execute all tests with just one command. Initially, I tried enter ...

javascriptangularjsprotractor

The term "Cardlist" has not been defined and is therefore causing an

I created a CardList and attempted to add cards into the list using map, but encountered an error import React from 'react'; import Card from './Card'; const CardsContainer = ({robots}) => { const cardComponents = robots.map((r ...

javascriptreactjsnpm

Display a new div with its content every 5th item

I am currently working with a Smarty template that contains the following code output: Check out my other question on Stackoverflow My problem lies in the fact that the provided code does not repeat the inserted HTML after every 5 elements... Could some ...

javascriptjqueryhtmlsmarty3

Encountering a jQuery error while attempting to initiate an AJAX request

I'm currently working on a project in SharePoint and I want to integrate JQuery to make an ajax call from the homepage. However, when I attempt to make the call, I encounter an error stating "Array.prototype.slice: 'this' is not a JavaScript ...

javascriptjqueryajaxsharepoint-2010

Is there a way to send a request before opening a new page that doesn't involve using synchronous XMLHttpRequest on the main thread, which is

With the deprecation of synchronous XMLHttpRequest, I am curious about any potential alternatives to achieve a similar behavior. Non-blocking asynchronous XMLHttpRequests may not always be suitable for specific cases. I am specifically referring to a scen ...

javascriptxmlhttprequestdeprecated

Utilizing FullCalendar to fetch information via HTTP

Looking to incorporate FullCalendar with the capability to fetch data via HTTP and open a dialog box when a date is selected. Is there a recommended library for this specific setup? Alternatively, does anyone have a pre-existing example I could reference ...

angularangular6

Creating an application for inputting data by utilizing angular material and javascript

I am looking to create an application using Angular Material Design, AngularJS (in HTML), and JavaScript. The application should take input such as name, place, phone number, and email, and once submitted, it should be stored in a table below. You can fin ...

javascripthtmlangularjs

Tips for addressing the browser global object in TypeScript when it is located within a separate namespace with the identical name

Currently diving into TypeScript and trying to figure out how to reference the global Math namespace within another namespace named Math. Here's a snippet of what I'm working with: namespace THREE { namespace Math { export function p ...

typescript

Exploring NextJS with Typescript

Struggling to incorporate Typescript with NextJS has been a challenge, especially when it comes to destructured parameters in getInitialProps and defining the type of page functions. Take for example my _app.tsx: import { ThemeProvider } from 'styled ...

javascriptreactjstypescriptnext.js

What is the process for determining URL permissions?

Is there a way for me to control the permissions of the URLs that users are attempting to access? I have disabled buttons and other elements that could lead them there based on backend permissions, but I also want to prevent them from accessing those pages ...

angularangular2-routing

What is the best way to secure the installation of python packages for long-term use while executing my code within a python shell on NodeJS?

I have been encountering difficulties while attempting to install modules such as cv2 and numpy. Although I have come across a few solutions, each time the shell is used the installation process occurs again, resulting in increased response times. Below i ...

javascriptpythonnode.jsexpressweb-development-server

What is the best way to trigger UseEffect when new data is received in a material table?

I was facing an issue with calling a function in the material table (https://github.com/mbrn/material-table) when new data is received. I attempted to solve it using the following code. useEffect(() => { console.log(ref.current.state.data); ...

javascriptjqueryreactjsmaterial-uimaterial-table

Angular - Executing a function in one component from another

Within my Angular-12 application, I have implemented two components: employee-detail and employee-edit. In the employee-detail.component.ts file: profileTemplate: boolean = false; contactTemplate: boolean = false; profileFunction() { this.profileTempla ...

angulartypescriptangular12

Discover the effective method in Angular to display a solitary password validation message while dealing with numerous ones

Here is the pattern we use to validate input fields: The length of the input field should be between 6 and 15 characters. It should contain at least one lowercase letter (a-z). It should contain at least one uppercase letter (A-Z). It should contain at le ...

javascriptangularvalidationpasswordsangular-validation

Transfer the script from package.json to an npm package

In each of our plugins' root directories, there is a file named tools.js. This file contains a build function that assists in creating builds for the plugin. The package.json file references it like this: "scripts": { "build:node&qu ...

javascriptnode.jsnpm

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

javascriptjqueryhtmlcssflexbox

What is the reason for the failure of the jQuery code to disable the submit button in the following snippet?

I am working on a feature to disable the submit button in a form when the username, email, password fields are empty. When all of them are filled, I want to enable the submit button. However, the current code is not disabling the submit button as expected. ...

javascriptjqueryajax