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-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, 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: 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-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-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-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,