Created by: pvdlg
Fixes #18641 (closed), fixes #21328 (closed).
Util.getSelectorFromElement is used to obtains the selector, (and later then the matching elements), referenced by data-target or href in JS components.
If data-target is not defined it relies on a regex to determine if href is a selector or a regular link.
The problem is that there is no way to have a regex that will isolate URL from css selectors in 100% of the cases. For example href="div.class" can mean 'execute the JS action (collapse, dropdown, etc..) on all div with the class class or it can be a regular href URL redirecting to the page <context>/div.class
In order to solve this issue this PR remove the reliance on the regex and:
- replace
getSelectorFromElementbygetTargetsthat returns a JQuery with matching targets - if
data-targetis defined,getTargetsuses it - if
data-targetis not defined,getTargetstry to usehrefand considers it as the attribute containing the target selector, if a JQuery selection on it actually returns elements
In addition the PR slightly simplifies the code to retrieve targeted elements in each modules.
Currently if a JS module trigger element (i.e. element with data-toggle) doesn't have a valid selector in data-target nor in href nothing happen except for dropdown and alert in which the parent of the trigger is considered the target. There is no error reported and the JS module is bypassed and has no effect. I kept the same behavior in the PR.