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:
parent
d68c80ed15
commit
7d42d389b8
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue