Clicking the Toggle Button of an Open Action Menu Does Not Close It
This commit is contained in:
parent
0d0c1fd91b
commit
dee36c056b
|
@ -1,18 +1,18 @@
|
||||||
export default function clickOutside(element, callbackFunction) {
|
export default function clickOutside(element, callbackFunction) {
|
||||||
function onClick(event) {
|
function onClick(event) {
|
||||||
if (!element.contains(event.target)) {
|
if (!element.contains(event.target)) {
|
||||||
callbackFunction()
|
callbackFunction(event)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.addEventListener("mousedown", onClick, true)
|
document.body.addEventListener("click", onClick, true)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
update(newCallbackFunction) {
|
update(newCallbackFunction) {
|
||||||
callbackFunction = newCallbackFunction
|
callbackFunction = newCallbackFunction
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
document.body.removeEventListener("mousedown", onClick, true)
|
document.body.removeEventListener("click", onClick, true)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,6 +33,13 @@
|
||||||
open = false
|
open = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleOutsideClick = e => {
|
||||||
|
if (open) {
|
||||||
|
e.stopPropagation()
|
||||||
|
hide()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let open = null
|
let open = null
|
||||||
|
|
||||||
function handleEscape(e) {
|
function handleEscape(e) {
|
||||||
|
@ -47,7 +54,7 @@
|
||||||
<div
|
<div
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
use:positionDropdown={{ anchor, align, maxWidth }}
|
use:positionDropdown={{ anchor, align, maxWidth }}
|
||||||
use:clickOutside={hide}
|
use:clickOutside={handleOutsideClick}
|
||||||
on:keydown={handleEscape}
|
on:keydown={handleEscape}
|
||||||
class={"spectrum-Popover is-open " + (tooltipClasses || "")}
|
class={"spectrum-Popover is-open " + (tooltipClasses || "")}
|
||||||
role="presentation"
|
role="presentation"
|
||||||
|
|
Loading…
Reference in New Issue