github
html_url | issue_url | id | node_id | user | created_at | updated_at | author_association | body | reactions | issue | performed_via_github_app |
---|---|---|---|---|---|---|---|---|---|---|---|
https://github.com/simonw/datasette/issues/1771#issuecomment-1356694671 | https://api.github.com/repos/simonw/datasette/issues/1771 | 1356694671 | IC_kwDOBm6k_c5Q3YSP | 9599 | 2022-12-18T06:34:20Z | 2022-12-18T06:34:20Z | OWNER | Now live on https://latest.datasette.io/fixtures/attraction_characteristic | { "total_count": 0, "+1": 0, "-1": 0, "laugh": 0, "hooray": 0, "confused": 0, "heart": 0, "rocket": 0, "eyes": 0 } |
1306984363 | |
https://github.com/simonw/datasette/issues/1771#issuecomment-1356680769 | https://api.github.com/repos/simonw/datasette/issues/1771 | 1356680769 | IC_kwDOBm6k_c5Q3U5B | 9599 | 2022-12-18T05:56:05Z | 2022-12-18T05:56:05Z | OWNER | This does the trick: ```css div.select-wrapper:focus-within { border: 1px solid black; } ``` ![tab-select-border-fix](https://user-images.githubusercontent.com/9599/208283826-de48212f-a213-40fc-9b37-9d66f0858f21.gif) | { "total_count": 0, "+1": 0, "-1": 0, "laugh": 0, "hooray": 0, "confused": 0, "heart": 0, "rocket": 0, "eyes": 0 } |
1306984363 | |
https://github.com/simonw/datasette/issues/1771#issuecomment-1356657451 | https://api.github.com/repos/simonw/datasette/issues/1771 | 1356657451 | IC_kwDOBm6k_c5Q3PMr | 1473102 | 2022-12-18T04:04:32Z | 2022-12-18T04:04:32Z | NONE | the problem is: ``` .select-wrapper select:focus { outline: none; } ``` I sometimes add this js: ``` window.addEventListener('keydown', function check_tab(e) { if (e.key === 'Tab') { document.documentElement.classList.add('user-is-tabbing') window.removeEventListener('keydown', check_tab) } }) ``` and then in the css, using a `html.user-is-tabbing` selector undo any outlines I removed. | { "total_count": 0, "+1": 0, "-1": 0, "laugh": 0, "hooray": 0, "confused": 0, "heart": 0, "rocket": 0, "eyes": 0 } |
1306984363 | |
https://github.com/simonw/datasette/issues/1771#issuecomment-1356655630 | https://api.github.com/repos/simonw/datasette/issues/1771 | 1356655630 | IC_kwDOBm6k_c5Q3OwO | 9599 | 2022-12-18T03:43:12Z | 2022-12-18T03:43:12Z | OWNER | The border is actually on the div that wraps the select box: <img width="1171" alt="image" src="https://user-images.githubusercontent.com/9599/208280249-9d9848b5-6e33-46c3-ad99-bc1948e08f25.png"> I tried adding a `border: 1px dotted black` to `select:focus` but it's not quite right - it jumps around a bit like this: ![Tabbing to the selects shows a 1px border but the element expands in size by one pixel, causing a visual jump](https://user-images.githubusercontent.com/9599/208280271-41a07f68-b8b1-4908-a4e2-aac4304d6c09.gif) | { "total_count": 0, "+1": 0, "-1": 0, "laugh": 0, "hooray": 0, "confused": 0, "heart": 0, "rocket": 0, "eyes": 0 } |
1306984363 | |
https://github.com/simonw/datasette/issues/1771#issuecomment-1356655217 | https://api.github.com/repos/simonw/datasette/issues/1771 | 1356655217 | IC_kwDOBm6k_c5Q3Opx | 9599 | 2022-12-18T03:38:16Z | 2022-12-18T03:38:16Z | OWNER | OK I see what you mean: https://latest.datasette.io/fixtures/attraction_characteristic ![Animated GIF of the table page hitting tab a bunch - the cog icon highlights and so does the text input but the two select boxes do not](https://user-images.githubusercontent.com/9599/208280176-1e2de671-fe69-43e8-8d62-bf7aa8f4d36e.gif) | { "total_count": 0, "+1": 0, "-1": 0, "laugh": 0, "hooray": 0, "confused": 0, "heart": 0, "rocket": 0, "eyes": 0 } |
1306984363 |