modals are not working with <area> links

[tgirod]

From the documentation on modals: http://getbootstrap.com/javascript/#modals-options

Adding a href attribute pointing to a page will load the page's content inside .modal-content. It works for a regular link, it works for a button, but it doesn't work for a <area> link.

<area shape="poly" coords="..." data-toggle="modal" data-target="#modal">

This will toggle my #modal display with its default content.

<area shape="poly" coords="..." data-toggle="modal" data-target="#modal" href="remote.html">

Won't toggle my modal display but simply follow the link instead.

[mdo]

Never used an area element myself. Can you create a JS Bin or JS Fiddle example?

[tgirod]

Well, this is weird. this jsfiddle (my first one, maybe I'm doing something wrong) does reproduce the bug, but the proper link, which should load the remote content inside the modal doesn't work either, even though it worked yesterday on my project.

Well, at least you have the <area> code you can copy-paste if you want to try locally ... I hope it will help !

[cvrebert]

The code currently only prevents the default action (navigating to the link target) for <a> tags.
See

bootstrap/js/modal.js

Line 328 in d533bf0

if ($this.is('a')) e.preventDefault()

Presumably we should add <area> to that if.

[cvrebert]

v4 is also affected:

bootstrap/js/src/modal.js

Line 497 in 64b9ad4

if (this.tagName === 'A') {

[mishra-ankit]

Updating if sounds good to me, I can go ahead with the change if the approach is confirmed.

[cvrebert]

@mishra-ankit Go for it. 😄 You will also need to add a testcase to the test suite; see https://github.com/twbs/bootstrap/tree/v4-dev/js/tests for info on how to do that.