diff --git a/package-lock.json b/package-lock.json index 654d80223..ef38e722d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17670,9 +17670,9 @@ } }, "node-fetch": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", - "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", "dev": true }, "node-forge": { diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx index 0ff7b2dfe..88c6a28fe 100644 --- a/src/Modal/Modal.tsx +++ b/src/Modal/Modal.tsx @@ -24,7 +24,7 @@ export interface ModalProps { } export const Modal: React.FC = React.memo(({ trapFocus = true, escapeToDismiss = true, ...props }: ModalProps) => { - const prestine: React.MutableRefObject = React.useRef(true); + const pristine: React.MutableRefObject = React.useRef(true); const [className, setClassName] = React.useState("seb modal"); const modalRef: React.MutableRefObject = React.useRef(); /** @@ -83,7 +83,9 @@ export const Modal: React.FC = React.memo(({ trapFocus = true, escap focusableElement && focusableElement.focus(); } /** Un-focus from the element inside the modal when it's toggled off */ - !props.toggle && (document.activeElement as HTMLElement).blur(); + if (!props.toggle && pristine.current && trapFocus) { + (document.activeElement as HTMLElement)?.blur(); + } return () => { window.removeEventListener("keydown", keyCombinationListener); @@ -118,7 +120,7 @@ export const Modal: React.FC = React.memo(({ trapFocus = true, escap React.useEffect(() => { let classNames: string = "seb modal"; - classNames += props.toggle ? " show" : prestine.current ? "" : " hide"; + classNames += props.toggle ? " show" : pristine.current ? "" : " hide"; classNames += props.centered ? " modal-centered" : ""; classNames += !!props.position ? " modal-aside modal-aside-" + (props.position === "left" ? "left" : "right") : ""; classNames += props.fullscreen ? " modal-fullscreen" : ""; @@ -127,7 +129,7 @@ export const Modal: React.FC = React.memo(({ trapFocus = true, escap }, [props.toggle, props.centered, props.position, props.fullscreen, props.className]); React.useEffect(() => { - prestine.current = false; + pristine.current = false; escapeToDismiss && window[props.toggle ? "addEventListener" : "removeEventListener"]("keyup", escapeKeyListener); return () => { diff --git a/src/Table/table-style.scss b/src/Table/table-style.scss index 657f2cb77..e5c06b3d4 100644 --- a/src/Table/table-style.scss +++ b/src/Table/table-style.scss @@ -105,7 +105,7 @@ table { > .ellipsis-dropdown-holder { position: relative; display: inline-block; - + min-width: 20px; .icon-holder { &:hover { background: $icon-active-color;