Inbox notification: fixed Dismiss dropdowns for IE 11 (https://github.com/woocommerce/woocommerce-admin/pull/4504)

* Added refactor in "handleBlur" for IE compatibility

This commit adds a refactor in the method "handleBlur" for IE compatibility

* Modified styles for IE compatibility

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
This commit is contained in:
Fernando 2020-06-10 10:32:55 -03:00 committed by GitHub
parent d68c80ed15
commit 7d42d389b8
2 changed files with 20 additions and 2 deletions

View File

@ -131,9 +131,13 @@ class InboxNoteCard extends Component {
'woocommerce-admin-dismiss-notification',
'components-popover__content',
];
const isClickOutsideDropdown = event.relatedTarget
// This line is for IE compatibility.
const relatedTarget = event.relatedTarget
? event.relatedTarget
: document.activeElement;
const isClickOutsideDropdown = relatedTarget
? dropdownClasses.some( ( className ) =>
event.relatedTarget.className.includes( className )
relatedTarget.className.includes( className )
)
: false;
if ( isClickOutsideDropdown ) {
@ -146,6 +150,7 @@ class InboxNoteCard extends Component {
renderDismissButton() {
return (
<Dropdown
contentClassName="woocommerce-admin-dismiss-dropdown"
position="bottom right"
renderToggle={ ( { onClose, onToggle } ) => (
<Button

View File

@ -207,3 +207,16 @@
}
}
}
// Tweak to fix dropdown and placeholder in IE 11
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.woocommerce-admin-dismiss-dropdown {
margin-top: 0;
}
.woocommerce-inbox-message__wrapper {
.is-placeholder & {
padding-bottom: 10px;
}
}
}