diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index cdfae019f..bc50e017b 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -30,7 +30,7 @@ type Props = {
 
 type State = {
 	isSearching: boolean
-	shownCard: Card | null
+	shownCard?: Card
 	viewMenu: boolean
     isHoverOnCover: boolean
 }
@@ -42,7 +42,7 @@ class BoardComponent extends React.Component<Props, State> {
 
 	constructor(props: Props) {
 		super(props)
-		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false, shownCard: null }
+		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false }
 	}
 
 	componentDidUpdate(prevPros: Props, prevState: State) {
@@ -73,7 +73,7 @@ class BoardComponent extends React.Component<Props, State> {
 			<div className="octo-app">
 				{this.state.shownCard &&
 					<RootPortal>
-						<CardDialog boardTree={boardTree} card={this.state.shownCard} mutator={mutator} onClose={() => this.setState({shownCard: null})}/>
+						<CardDialog boardTree={boardTree} card={this.state.shownCard} onClose={() => this.setState({shownCard: undefined})}/>
 					</RootPortal>}
 
 				<div className="octo-frame">
@@ -246,7 +246,7 @@ class BoardComponent extends React.Component<Props, State> {
 		if (boardTree.groupByProperty) {
 			card.properties[boardTree.groupByProperty.id] = groupByValue
 		}
-		await mutator.insertBlock(card, "add card", async () => { await this.setState({shownCard: card}) }, async () => { await this.setState({shownCard: null}) })
+		await mutator.insertBlock(card, "add card", async () => { await this.setState({shownCard: card}) }, async () => { await this.setState({shownCard: undefined}) })
 	}
 
 	async propertyNameChanged(option: IPropertyOption, text: string) {
diff --git a/src/client/components/cardDialog.tsx b/src/client/components/cardDialog.tsx
index df33168a1..cf17778cd 100644
--- a/src/client/components/cardDialog.tsx
+++ b/src/client/components/cardDialog.tsx
@@ -23,7 +23,7 @@ type Props = {
 
 type State = {
 	isHoverOnCover: boolean
-	cardTree: CardTree | null
+	cardTree?: CardTree
 }
 
 class CardDialog extends React.Component<Props, State> {
@@ -32,7 +32,7 @@ class CardDialog extends React.Component<Props, State> {
 
 	constructor(props: Props) {
 		super(props)
-		this.state = { isHoverOnCover: false, cardTree: null }
+		this.state = { isHoverOnCover: false }
 	}
 
 	keydownHandler = (e: KeyboardEvent) => {
@@ -59,7 +59,7 @@ class CardDialog extends React.Component<Props, State> {
 	}
 
 	componentDidUpdate(prevProps: Props, prevState: State) {
-		if (this.titleRef.current && prevState.cardTree === null && this.state.cardTree !== null) {
+		if (this.titleRef.current && prevState.cardTree === undefined && this.state.cardTree !== undefined) {
 			this.titleRef.current.focus()
 		}
 	}
@@ -72,7 +72,7 @@ class CardDialog extends React.Component<Props, State> {
 		const { boardTree, card } = this.props
 		const { cardTree } = this.state
 		const { board } = boardTree
-		if (cardTree === null) {
+		if (cardTree === undefined) {
 			return null
 		}
 
diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx
index 6aea11ede..6e2ee502f 100644
--- a/src/client/components/tableComponent.tsx
+++ b/src/client/components/tableComponent.tsx
@@ -29,7 +29,7 @@ type Props = {
 type State = {
 	isHoverOnCover: boolean
 	isSearching: boolean
-	shownCard: Card | null
+	shownCard?: Card
 	viewMenu: boolean
 }
 
@@ -41,7 +41,7 @@ class TableComponent extends React.Component<Props, State> {
 
 	constructor(props: Props) {
 		super(props)
-		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false, shownCard: null }
+		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false }
 	}
 
 	componentDidUpdate(prevPros: Props, prevState: State) {
@@ -70,7 +70,7 @@ class TableComponent extends React.Component<Props, State> {
 			<div className="octo-app">
 				{this.state.shownCard &&
 					<RootPortal>
-						<CardDialog boardTree={boardTree} card={this.state.shownCard} mutator={mutator} onClose={() => this.setState({shownCard: null})}/>
+						<CardDialog boardTree={boardTree} card={this.state.shownCard} onClose={() => this.setState({shownCard: undefined})}/>
 					</RootPortal>}
 				<div className="octo-frame">
 					<div