{"action":"opened","issue":{"url":"https://api.github.com/repos/thednp/bootstrap.native/issues/136","repository_url":"https://api.github.com/repos/thednp/bootstrap.native","labels_url":"https://api.github.com/repos/thednp/bootstrap.native/issues/136/labels{/name}","comments_url":"https://api.github.com/repos/thednp/bootstrap.native/issues/136/comments","events_url":"https://api.github.com/repos/thednp/bootstrap.native/issues/136/events","html_url":"https://github.com/thednp/bootstrap.native/issues/136","id":235870820,"number":136,"title":"Navbar data-target accepts only selectors starting with id (broken compatibility with upstream Bootstrap JS)","user":{"login":"mirzal","id":12373754,"avatar_url":"https://avatars1.githubusercontent.com/u/12373754?v=3","gravatar_id":"","url":"https://api.github.com/users/mirzal","html_url":"https://github.com/mirzal","followers_url":"https://api.github.com/users/mirzal/followers","following_url":"https://api.github.com/users/mirzal/following{/other_user}","gists_url":"https://api.github.com/users/mirzal/gists{/gist_id}","starred_url":"https://api.github.com/users/mirzal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mirzal/subscriptions","organizations_url":"https://api.github.com/users/mirzal/orgs","repos_url":"https://api.github.com/users/mirzal/repos","events_url":"https://api.github.com/users/mirzal/events{/privacy}","received_events_url":"https://api.github.com/users/mirzal/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-06-14T12:59:47Z","updated_at":"2017-06-14T12:59:47Z","closed_at":null,"body":"Bootstrap.native Collapse data API requires `data-target` attribute value to start with `#` (i.e. selector to start with id), whereas upstream bootstrap JavaScript will accept any valid selector. As a result, some pages that do work with bootstrap JS will not work correctly with bootstrap.native JS.\r\n\r\n## Steps to reproduce\r\n\r\n1. Open [upstream bootstrap JSFiddle example](https://jsfiddle.net/fhod0Lnb/). Make sure that page view box is narrow enough to display hamburger icon in navbar.\r\n2. Click hamburger icon and verify that menu items are displayed.\r\n3. Open [bootstrap.native JSFiddle example](https://jsfiddle.net/gpxgqrcn/1/). Make sure that page view box is narrow enough to display hamburger icon in navbar.\r\n4. Click hamburger icon and verify that nothing happens. Error message is:\r\n    ```\r\n    Uncaught TypeError: Cannot read property 'contains' of undefined\r\n        at hasClass (bootstrap-native.js:159)\r\n        at HTMLButtonElement.Collapse.toggle (bootstrap-native.js:886)\r\n    ```\r\n5. In bootstrap.native JSFiddle change `<button>` `data-target` value from `.navbar-collapse` to `#navbar.navbar-collapse`. Run it and repeat step 4. Menu items will be displayed this time.\r\n\r\n## Analysis\r\n\r\nThe problem lies in `lib/V3/collapse-native.js` line 68. `getTarget` function will return element if `id` is truthy; id will use `href` value or `data-target` value, but the latter only if it matches `targetsReg` regular expression. That expression, defined in `lib/V3/utils.js` line 203, will match everything that starts with `#`. Class or element-based data-target selectors (which may be as unique as id-based selector) will not match, and Collapse will not work with them.\r\n\r\nI am unsure about correct way of solving this. Changing `targetsReg` seems to be obvious, but trying to match any valid CSS selector can quickly spin out of control; on the other hand, verifying that selector value is non-empty seems to not be specific enough.\r\n\r\n`targetsReg` seems to be only used in few places (`collapse`, `scrollspy` and `tab`), and `queryElement` function is used immediately in two of them. Maybe regular expression could be dropped and `queryElement` could verify if selector matched anything and return some sane value if it does not?"}}
{"actor":{"display_login":"mirzal"}}