Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dropdown does not autoclose, throwing: Object doesn't support property or method 'closest' #3783

Closed
Istanful opened this issue Jun 23, 2020 · 7 comments
Closed

Dropdown does not autoclose, throwing: Object doesn't support property or method 'closest' #3783

Istanful opened this issue Jun 23, 2020 · 7 comments
Labels
component: dropdown type: bug

Comments

@Istanful
Copy link
Contributor

Bug description:

When I open a dropdown with autoclose and then click on the scrollbar in edge, an error is thrown in the console. It throws the error Object doesn't support property or method 'closest'. It is thrown because the element in event.target is HTMLDocument which does not support the closest method.

Link to minimally-working StackBlitz that reproduces the issue:

StackBlitz: https://angular-dpdswh-r6tj5y.stackblitz.io

  1. Open the StackBlitz in Edge 44.18362.449.0.
  2. Open the dropdown by clicking on it. Click on the scrollbar.
  3. The dropdown does not close. An error is thrown in the console.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 8.2.13

ng-bootstrap: 4.2.2

Bootstrap: 4.3.1

Browser: Edge 44.18362.449.0, EdgeHTML 18.18362
@benouat
Copy link
Member

benouat commented Jun 25, 2020 •
edited

Hey @Istanful
thanks to report this issue!

I we refer to browser support page on angular.io for v8, only the 2 most recent major versions of Edge are supported.

With the release of Chromium based Edge back in January, I would say that we don't support EdgeHTML anymore...

@Istanful
Copy link
Contributor Author

@benouat

Thank you for the swift answer! Makes perfect sense.

About 60% of the application I'm working on uses those old Edge versions, which of course is a shame. Because of that I will have to do some kind of workaround. Do you know of any specific settings I can use that will circumvent this issue?

The current solution would be to write a custom auto close strategy and disable yours entirely. :/

@benouat
Copy link
Member

benouat commented Jun 25, 2020

I would suggest to use a polyfill 🙂 Way much easier.

You can have a look at this MDN page

@Istanful
Copy link
Contributor Author

@benouat I tried using a polyfill. It did not resolve the issue. The issue is not that Element.prototype.closest is missing. The problem is that it is behaving differently. :(

When the user clicks on the scrollbar the event.target variable will be HTMLDocument in Edge. That specific element does not have the method.

@benouat
Copy link
Member

benouat commented Jun 25, 2020

oohhh my bad!
I did not read carefully your issue description!!

EdgeHTML actually do support closest 😄 It's only when you click on the scrollbar.
Right, then you might have spotted a bug in a sense, that we should discard doing the call to closest if event.target is document.

Sorry for that.
We'll have a look

@Istanful
Copy link
Contributor Author

@benouat Cool! I will make an attempt on a PR if you don't get to it first. :)

Istanful added a commit to Istanful/ng-bootstrap that referenced this issue Jun 25, 2020
@Istanful
build: support closest for HTMLDocument (ng-bootstrap#3783)
08ea528 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.By emulating `Element.prototype.closest` for this specific node, thiscommit circumvents the issue.
Istanful added a commit to Istanful/ng-bootstrap that referenced this issue Jun 25, 2020
@Istanful
build: support closest for HTMLDocument (ng-bootstrap#3783)
053a2c7 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.

By emulating `Element.prototype.closest` for this specific node, this
commit circumvents the issue.
Istanful added a commit to Istanful/ng-bootstrap that referenced this issue Jun 25, 2020
@Istanful
build: support closest for HTMLDocument (ng-bootstrap#3783)
ed5fd75 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.

By emulating `Element.prototype.closest` for this specific node, this
commit circumvents the issue.
Istanful added a commit to Istanful/ng-bootstrap that referenced this issue Jun 25, 2020
@Istanful
build: support closest for HTMLDocument (ng-bootstrap#3783)
6371956 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.

By emulating `Element.prototype.closest` for this specific node, this
commit circumvents the issue.
Istanful added a commit to Istanful/ng-bootstrap that referenced this issue Jun 25, 2020
@Istanful
build: support closest for HTMLDocument (ng-bootstrap#3783)
1ad9cef 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.

By emulating `Element.prototype.closest` for this specific node, this
commit circumvents the issue.
Istanful added a commit to Istanful/ng-bootstrap that referenced this issue Jun 25, 2020
@Istanful
build: support closest for HTMLDocument (ng-bootstrap#3783)
e456fa7 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.

By emulating `Element.prototype.closest` for this specific node, this
commit circumvents the issue.
Istanful added a commit to Istanful/ng-bootstrap that referenced this issue Jun 25, 2020
@Istanful
build: support closest for HTMLDocument (ng-bootstrap#3783)
f9d23f6 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.

By emulating `Element.prototype.closest` for this specific node, this
commit circumvents the issue.
@Istanful
Copy link
Contributor Author

Istanful commented Jun 26, 2020 •
edited

@benouat I made a pull request for this. The only different is that closest returns null for document. Apart from the automatic tests I tested in 44.18362.449.0, Safari 14609.2.9.1.3 and Chrome 83.0.4103.106. :)

Istanful added a commit to Istanful/ng-bootstrap that referenced this issue Jul 7, 2020
@Istanful
fix(dropdown): support closest for HTMLDocument
759ef73 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.

By emulating `Element.prototype.closest` for this specific node, this
commit circumvents the issue.

Fixes ng-bootstrap#3783.
Istanful added a commit to Istanful/ng-bootstrap that referenced this issue Jul 7, 2020
@Istanful
fix(dropdown): support closest for HTMLDocument
4b72fa1 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.

By emulating `Element.prototype.closest` for this specific node, this
commit circumvents the issue.

Fixes ng-bootstrap#3783.
@benouat benouat closed this as completed in 3df904d Jul 8, 2020
maxokorokov pushed a commit that referenced this issue Jul 8, 2020
@Istanful @maxokorokov
fix(dropdown): support closest for HTMLDocument in EdgeHTML (#3786)
d11530a 
When autoclosing a dropdown by clicking the scrollbar, an error would be
thrown in Edge 44.18362.449.0. This was due to the HTMLDocument not
supporting `Element.prototype.closest`.

By emulating `Element.prototype.closest` for this specific node, this
commit circumvents the issue.

Fixes #3783.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: dropdown type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@benouat @Istanful