diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html index 6629e08f5a..fdc765f5f5 100644 --- a/src/open_inwoner/components/templates/components/Form/FileInput.html +++ b/src/open_inwoner/components/templates/components/Form/FileInput.html @@ -3,12 +3,10 @@
{{ field.help_text }}
{% endif %} diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js index 45fff45656..001a1ec79e 100644 --- a/src/open_inwoner/js/components/form/FileInput.js +++ b/src/open_inwoner/js/components/form/FileInput.js @@ -99,6 +99,9 @@ export class FileInput extends Component { * Gets called when dragging ends on the card (drop zone). */ onDragLeave(e) { + if(e.target !== this.getCard()) { + return; + } this.node.classList.remove('file-input--drag-active') } diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss index 3b067700c4..6d777006ae 100644 --- a/src/open_inwoner/scss/components/Form/FileInput.scss +++ b/src/open_inwoner/scss/components/Form/FileInput.scss @@ -8,6 +8,12 @@ &--drag-active .card:first-child { background-color: var(--color-gray-lightest); + border-style: dashed; + } + + &--drag-active .card__body, + .card:first-child [class*='icon'] { + pointer-events: none; } .card__body {