Fixing drag and drop on hidden columns

webapp/src/components/kanban/kanban.tsx

@@ -27,9 +27,18 @@ type Props = {
     addCard: (groupByOptionId?: string) => Promise<void>
 }
 
-class Kanban extends React.Component<Props> {
-    private draggedCards: Card[] = []
-    private draggedHeaderOption?: IPropertyOption
+type State = {
+    draggedCards: Card[]
+    draggedHeaderOption?: IPropertyOption
+}
+
+class Kanban extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props)
+        this.state = {
+            draggedCards: [],
+        }
+    }
 
     shouldComponentUpdate(): boolean {
         return true
@@ -70,7 +79,7 @@ class Kanban extends React.Component<Props> {
                             propertyNameChanged={this.propertyNameChanged}
                             onDropToColumn={this.onDropToColumn}
                             setDraggedHeaderOption={(draggedHeaderOption?: IPropertyOption) => {
-                                this.draggedHeaderOption = draggedHeaderOption
+                                this.setState({draggedHeaderOption})
                             }}
                         />
                     ))}
@@ -126,13 +135,13 @@ class Kanban extends React.Component<Props> {
                                     }}
                                     onDragStart={() => {
                                         if (this.props.selectedCardIds.includes(card.id)) {
-                                            this.draggedCards = this.props.selectedCardIds.map((id) => boardTree.allCards.find((o) => o.id === id)!)
+                                            this.setState({draggedCards: this.props.selectedCardIds.map((id) => boardTree.allCards.find((o) => o.id === id)!)})
                                         } else {
-                                            this.draggedCards = [card]
+                                            this.setState({draggedCards: [card]})
                                         }
                                     }}
                                     onDragEnd={() => {
-                                        this.draggedCards = []
+                                        this.setState({draggedCards: []})
                                     }}
 
                                     isDropZone={isManualSort}
@@ -168,7 +177,7 @@ class Kanban extends React.Component<Props> {
                                     intl={this.props.intl}
                                     readonly={this.props.readonly}
                                     onDropToColumn={this.onDropToColumn}
-                                    hasDraggedCards={this.draggedCards.length > 0}
+                                    hasDraggedCards={this.state.draggedCards.length > 0}
                                 />
                             ))}
                         </div>}
@@ -199,7 +208,7 @@ class Kanban extends React.Component<Props> {
 
     private onDropToColumn = async (option: IPropertyOption) => {
         const {boardTree} = this.props
-        const {draggedCards, draggedHeaderOption} = this
+        const {draggedCards, draggedHeaderOption} = this.state
         const optionId = option ? option.id : undefined
 
         Utils.assertValue(boardTree)
@@ -237,7 +246,7 @@ class Kanban extends React.Component<Props> {
         Utils.log(`onDropToCard: ${card.title}`)
         const {boardTree} = this.props
         const {activeView} = boardTree
-        const {draggedCards} = this
+        const {draggedCards} = this.state
         const optionId = card.properties[activeView.groupById!]
 
         if (draggedCards.length < 1 || draggedCards.includes(card)) {

webapp/src/components/kanban/kanbanHiddenColumnItem.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 /* eslint-disable max-lines */
-import React from 'react'
+import React, {useRef, useState} from 'react'
 import {IntlShape} from 'react-intl'
 
 import {IPropertyOption} from '../../blocks/board'
@@ -26,32 +26,34 @@ export default function KanbanHiddenColumnItem(props: Props): JSX.Element {
     const {boardTree, intl, group} = props
     const {activeView} = boardTree
 
-    const ref = React.createRef<HTMLDivElement>()
+    const ref = useRef<HTMLDivElement>(null)
+    const [dragClass, setDragClass] = useState('')
+
     return (
         <div
             ref={ref}
             key={group.option.id || 'empty'}
-            className='octo-board-hidden-item'
+            className={`octo-board-hidden-item ${dragClass}`}
             onDragOver={(e) => {
                 if (props.hasDraggedCards) {
-                    ref.current?.classList.add('dragover')
+                    setDragClass('dragover')
                     e.preventDefault()
                 }
             }}
             onDragEnter={(e) => {
                 if (props.hasDraggedCards) {
-                    ref.current?.classList.add('dragover')
+                    setDragClass('dragover')
                     e.preventDefault()
                 }
             }}
             onDragLeave={(e) => {
                 if (props.hasDraggedCards) {
-                    ref.current?.classList.remove('dragover')
+                    setDragClass('')
                     e.preventDefault()
                 }
             }}
             onDrop={(e) => {
-                ref.current?.classList.remove('dragover')
+                setDragClass('')
                 e.preventDefault()
                 if (props.hasDraggedCards) {
                     props.onDropToColumn(group.option)