diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index e072855..566bd5d 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
 import WBBrowseDialogCollectionList from 'wb-browse-dialog-collection-list';
 import WBBrowseDialogCollectionContent from 'wb-browse-dialog-collection-content';
@@ -44,6 +44,7 @@ class WBBrowseDialog extends Component {
     this.state.textSearch = '';
     this.state.id = ('id' in this.props) ? this.props.id : uuid.v4();
     this.state.accept = () => {};
+    this.modalRef = createRef();
   }
 
   navigateBack() {
@@ -144,6 +145,10 @@ class WBBrowseDialog extends Component {
     $('#' + this.state.id).modal();
   }
 
+  componentWillUnmount() {
+    $(this.modalRef.current).modal('hide');
+  }
+
   render({ app },
     { history, currentUrl, mode, uuid,
       topPage, bottomPage, textSearch,
@@ -151,7 +156,7 @@ class WBBrowseDialog extends Component {
       selectMany, selectWhat }) {
 
     return (
-      <div class="modal" id={ id } tabindex="-1" role="dialog">
+      <div class="modal" id={ id } tabindex="-1" role="dialog" ref={ this.modalRef }>
         <div class="modal-dialog modal-lg" role="document">
           <div class="modal-content">
             <div class="modal-header">
diff --git a/frontend/src/js/widget/wb-dialog.js b/frontend/src/js/widget/wb-dialog.js
index 204bc2c..fc357a8 100644
--- a/frontend/src/js/widget/wb-dialog.js
+++ b/frontend/src/js/widget/wb-dialog.js
@@ -1,25 +1,27 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 
 class WBDialog extends Component {
   constructor(...args) {
     super(...args);
-    this.state.id = uuid.v4();
+    this.modalRef = createRef();
   }
 
   show() {
-    const { id } = this.state;
-    $('#' + id).modal();
+    $(this.modalRef.current).modal();
   }
 
   hide() {
-    const { id } = this.state;
-    $('#' + id).modal('hide');
+    $(this.modalRef.current).modal('hide');
   }
 
-  render({ title, children, accept, reject }, { id }) {
+  componentWillUnmount() {
+    $(this.modalRef.current).modal('hide');
+  }
+
+  render({ title, children, accept, reject }) {
     return (
       <form class="m-0">
-        <div class="modal" id={ id } tabindex="-1" role="dialog">
+        <div class="modal" tabindex="-1" role="dialog" ref={ this.modalRef }>
           <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
               <div class="modal-header">