Help understand how discord implemented this cyan outline
Answered
Tomistoma posted this in #help-forum
TomistomaOP
The outline appears only when we use
I tried setting every single pseudo-state, nothing triggers it. So it isn't any of them.
Discord isn't using
I found that I can use the following snippet to be able to more easily inspect it (didnt help though):
You can get this outline from any of the inputs by tabbing into them.
tab, it doesn't appear on click.I tried setting every single pseudo-state, nothing triggers it. So it isn't any of them.
Discord isn't using
border or outline to generate this outline. So what the hell is it made from?I found that I can use the following snippet to be able to more easily inspect it (didnt help though):
setTimeout( () => { debugger }, 3000)You can get this outline from any of the inputs by tabbing into them.
Answered by necm1
meanwhile for the textare, it seems to be having the same width & height
26 Replies
TomistomaOP
normally that's a focus ring. Maybe it's not triggerable by css or discord handle it via js, but should be the focus
was thinking the same
@Tomistoma https://tailwindcss.com/docs/ring-width (just as an example)
TomistomaOP
I am able to recreate the same effect with
in discord's case, it's applied only on tab change. I wonder how they achieved this
focus:ring-4 ring-sky-500 however the ring is applied on click as well as on tab change for mein discord's case, it's applied only on tab change. I wonder how they achieved this
it's somehow reacting to the tab key
TomistomaOP
maybe they have custom login for checking if tab key was pressed, or they're not using
focus but have custom logic entirely?
so the shown border color seems to be right one as seen in the attachment
@Tomistoma after pressing tab, this one gets inserted into the DOM
but it seems to be also adapting to the boxes itself
<div class="focus-rings-ring" style="top: 327px; width: 1850px; height: 134px; left: 24px; --__adaptive-focus-ring-color: var(--focus-primary); --__adaptive-focus-ring-radius: 12px 12px 12px 12px;"></div>
magic seems to be happening here
looks like it is a js solution, which applies css to the correct elements
I mean you could maybe use the "keydown" eventListener
document.addEventListener('keydown', (e) => {
if (e.key === "Tab") {
e.preventDefault();
const activeElement = document.activeElement;
if (!activeElement) {
return;
}
// insert the pseudo element here
// set z-index to 2
// some css magic here
// set width & height but I guess you have to do some math stuff here too
// so you can just go a little bit more outside of the activeElement
// get the active elment position and set the height
}
});
just take a look on the picture, so the box itself seems to haivng a height of 142px meanwhile the
focus-ring-ring / style attr has a height of 134pxAnswer
hope this helps. seems to be easy to recreate
feel free to ping me, if you need more help
indeed. adding
:focus to every element would be pain, so they made a really smart solution herewho knows 🤷♂️ maybe it's also just a
<TabFocus>...</TabFocus> component, that is wrapped around specific elements, to get the right elementsTomistomaOP
Ohh okay i see. thanks!
@Tomistoma feel free to mark any answer here as described here