Next.js Discord

Discord Forum

Help understand how discord implemented this cyan outline

Answered
Tomistoma posted this in #help-forum
Open in Discord
TomistomaOP
The outline appears only when we use 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
View full answer

26 Replies

TomistomaOP
@Tomistoma https://tailwindcss.com/docs/ring-width (just as an example)
@B33fb0n3 normally that's a focus ring. Maybe it's not triggerable by css or discord handle it via js, but should be the focus
TomistomaOP
I am able to recreate the same effect with focus:ring-4 ring-sky-500 however the ring is applied on click as well as on tab change for me

in discord's case, it's applied only on tab change. I wonder how they achieved this
necm1
it's somehow reacting to the tab key
@necm1 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?
@Tomistoma maybe they have custom login for checking if tab key was pressed, or they're not using `focus` but have custom logic entirely?
necm1
soo
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
B33fb0n3
looks like it is a js solution, which applies css to the correct elements
necm1
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 134px
necm1
meanwhile for the textare, it seems to be having the same width & height
Answer
necm1
hope this helps. seems to be easy to recreate
feel free to ping me, if you need more help
@B33fb0n3 looks like it is a js solution, which applies css to the correct elements
necm1
indeed. adding :focus to every element would be pain, so they made a really smart solution here
@necm1 indeed. adding `:focus` to every element would be pain, so they made a really smart solution here
B33fb0n3
who knows 🤷‍♂️ maybe it's also just a <TabFocus>...</TabFocus> component, that is wrapped around specific elements, to get the right elements
@necm1 <@1246555821769228319> after pressing tab, this one gets inserted into the DOM
TomistomaOP
Ohh okay i see. thanks!
Original message was deleted
necm1
@Tomistoma feel free to mark any answer here as described here