diff --git a/src/custom-elements/src/components/drawer/drawer.tsx b/src/custom-elements/src/components/drawer/drawer.tsx
index aa3c35d29..47d992e9e 100644
--- a/src/custom-elements/src/components/drawer/drawer.tsx
+++ b/src/custom-elements/src/components/drawer/drawer.tsx
@@ -214,10 +214,17 @@ export class Drawer {
 
   private _documentClickHandler = (ev): void => {
     const drawerElement = this.el.querySelector('.chi-drawer');
+    const drawerCloseButton = this.nonClosable ? null : drawerElement.querySelector('button.-close');
+    const clickTarget = ev.target as HTMLElement;
 
     if (!this.preventAutoHide) {
       if (drawerElement.classList.contains('-active')) {
-        this.active = contains(drawerElement, ev.target as HTMLInputElement);
+        const clickOnCloseButton = drawerCloseButton &&
+          clickTarget === drawerCloseButton ||
+          contains(drawerCloseButton, clickTarget);
+
+        this.active = contains(drawerElement, clickTarget) &&
+          !clickOnCloseButton;
       }
     }
   };