We Keep Coding

How to detect focus out on div

I am working on accessibility, so I am testing my app using TAB key. I would like to do something when following div element loses focus.
So in my imagination this onBlur function should only fire when I would click TAB key on button 2 and move to button 3. But this onBlur is call on every TAB click in inside this div. Why this is happening?
What should I do to fire function only when I will be outside of this div. So after click TAB key on button 2 and move to button 3, this function should be fired
export default function App() {
return (
<>
<div onBlur={() => console.log('Blur')} style={{ padding: '20px', border: '1px solid #000'}} tabIndex={0}>
<button>1</button>
<button>2</button>
</div>
<button>3</button>
</>
);
}

You can simply take advantage of the e.relatedTarget that is available in the onBlur callback to detect if:
The related target is the current target <div> itself, or
The related target is a descendant of the current target <div> by using the Node.contains method
If neither conditions are met, then you conditionally invoke the necessary logic:
<div
onBlur={(e) => {
if (
e.relatedTarget !== e.currentTarget &&
!e.currentTarget.contains(e.relatedTarget)
) {
console.log("Blur");
}
}}
tabIndex={0}
>
{/* Content here */}
</div>
I have made a proof-of-concept Codesandbox to demonstrate the code above, but I've swapped out the <button> with <input> just for a more visual test:

If you only want onBlur to fire when leaving button 2 you can just move the onBlur to button 2
return (
<>
<div style={{ padding: '20px', border: '1px solid #000' }} tabIndex={0}>
<button>1</button>
<button onBlur={() => console.log('Blur')}>2</button>
</div>
<button>3</button>
</>
);

How do I force label and dropdown to be on same line?

I want to force the dropdown and the label to be on the same line. How can I force this. Because for now I get the label : Taste above the dropdown.
export default function MenuItemDisplay() {
...
return (
<div>
...
<div className="TextData">
Taste : <CustomDropdown style={styles.select} options={TASTE} defaultValue={LIKELIHOOD.find((t) => t.label === item.taste)} />
</div>
...
</div >
);
}
CustomDropdown:
export default function CustomDropdown({ style, options, styleSelect, defaultValue, isMulti }) {
return <div style={style}>
<Select styles={styleSelect} options={options} defaultValue={defaultValue} isMulti={isMulti} />
</div>
}

Try this. or display:flex
.textData {
display:grid;
grid-template-columns:auto auto;
}

First thing that I would do is wrap your 'label' in paragraph tags, because from a semantics point of view text should not be wrapped solely in a div.
<div className="TextData">
<p>Taste :</p>
<CustomDropdown
style={styles.select}
options={TASTE}
defaultValue={LIKELIHOOD.find((t) => t.label === item.taste)}
/>
</div>
Secondly, in order to get everything on the same line, you can add 'display: flex' to the the TextData class. By default, content within a flexbox is on the same line.
If you then wish to center your content horizontally and vertically, you can add 'align-items: center' and 'justify-content: center' to the same div.

Cannot close <dialog> element with display set to grid

The HtmlDialogElement.close() function seems to have no effect on a <dialog> element when that dialog has its display style set to grid.
Does anyone happen to know why? Note that removing the display: grid allow the dialog to function correctly. I have seen this behavior on the latest versions of both Chrome and Firefox.
See minimum reproduction below. If you prefer, here's a Codepen: https://codepen.io/ChristianMay/pen/MWrmdzJ
let dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
dialog.close();
})
dialog {
display: grid;
}
<dialog class="dialog" open="">
Test
</dialog>
<button id="dialog-close">Close dialog</button>

The dialog is considered to be open (or shown) if the attribute open is present.
Once this attribute is not present, the dialog is hidden. I suppose that setting the display to grid overrides the default styling for dialog, which should hide the dialog whenever open is removed. We could restore this behavior by adding styling to the dialog without open attribute.
let dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
dialog.close();
})
dialog:not([open]){
display:none;
}
dialog{
display:grid;
}
<dialog class="dialog" open="">
Test
</dialog>
<button id="dialog-close">Close dialog</button>

Already answered , but you could also display <dialog> as a grid only if it is an opened dialog ;)
dialog[open] {
display: grid;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
The CSS attribute selector matches elements based on the presence or value of a given attribute.
Demo snippet using the CSS attribute selector
const dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
dialog.removeAttribute("open");
})
let openButton = document.querySelector("#dialog-open");
openButton.addEventListener('click', () => {
dialog.setAttribute("open", "");
})
dialog[open] {
display: grid;
}
<dialog class="dialog" open="">
Test
</dialog>
<button id="dialog-close">Close dialog</button>
<button id="dialog-open">Open dialog</button>
fork of your pen

Open Modal javascript with horizontal scroll

Hi I would like to create a horizontal scroll like this: https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp but when the user click in the link a pop up opens. Thanks!

First make a pop-up with HTML and CSS
Use JavaScript to handle visibility.
Here is a sample code.
let openPopup = document.getElementById('show-pop-up')
let closePopup = document.getElementById('close-pop-up')
openPopup.addEventListener('click', function(){
document.getElementById('pop-up').style.display = 'block'
openPopup.style.display = 'none'
})
closePopup.addEventListener('click', function(){
document.getElementById('pop-up').style.display = 'none'
openPopup.style.display = 'block'
})
#pop-up {
display: none
}
<div id="pop-up">
<h5 id="pop-up-title">Pop up sample title.</h5>
<div class="pop-up-content">
<p>This is a sample pop up content.</p>
</div>
<button id="close-pop-up">Close Pop Up</button>
</div>
<button id="show-pop-up">Show Pop Up</button>

React scroll to ref with multiple scrollbars

I have a small problem that I can't figure out.
I have an element inside my page with a scrollbar. This means I got the main page scrollbar and a second scrollbar. I have a button inside that element that triggers a new div with some content inside of it. But that div is outside the view of the element so you need to scroll to see it. This is not really user friendly so I am trying to add a function that when you click on that button it scrolls to the new div.
Picture of element: https://imgur.com/8wIOTqo
button is the gold coloured one
The problem is that it is using the main page scrollbar and not the scrollbar of the element. Does anyone know how to fix this? Here is my code
// Function to open the element and scroll to the ref
function enableOtherAddressActive() {
secondDeliveryAddressRef.current.scrollIntoView();
setOtherAddress(true);
}
<div className="deliveryaddress__different">
{otherAddress ? (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={disableOtherAddressActive}>Afwijkend bezorgadres verwijderen</div>
) : (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={enableOtherAddressActive}>Afwijkend bezorgadres toevoegen</div>
)}
</div>
<div className="deliveryaddress__second" ref={secondDeliveryAddressRef}>
{otherAddress ? (
<div className="deliveryaddress__inner">
<h3 className="deliveryaddress__title">
Afwijkend bezorgadres toevoegen
</h3>
</div>
) : undefined}
</div>
</div>

One of the way to scroll to the element is assigning a id to the div and using scrollInto that
I have done in the codesandbox below refer it shows how to scroll into a particular element even if it is nested scrollbar
Code:
const handleScrollTo = () => {
setTimeout(() => {
document.getElementById(`element`) &&
document.getElementById(`element`).scrollIntoView({
behavior: "smooth",
block: "center"
});
}, 1000);
};