date input does not open calendar in JavaScript

I made this Kanban application. Everything works fine but when I click the Edit button the date input does not open calendar like it usually does when I try to edit it. I am just removing hide class from it and nothing else. When I edit the date manually, it updates correctly.

import Kanban from "./kanban.js";
const todo = document.querySelector(".cards.todo")
const pending = document.querySelector(".cards.pending")
const completed= document.querySelector(".cards.completed")
const cards = document.getElementsByClassName("card")
console.log(cards)
const taskbox = [todo, pending, completed]
function addTaskCard(task, index) {
taskbox[index].innerHTML += `
<form class="card" draggable="true" data-id="${task.taskId}">
<input type="text" name="task" autocomplete="off" value="${task.content}"/>
<span class="date">${task.date}</span>
<input type="date" class="deadline-input hide" name="date"/>
<div>
<span class="task-id">
#${task.taskId}
</span>
<span>
<button class="edit" data-id="${task.taskId}">Edit</button>
<button class="update hide" data-id="${task.taskId}" data-column="${index}">Update</button>
<button class="delete" data-id="${task.taskId}">Delete</button>
</span>
</div>
</form>
`
}
Kanban.getAllTasks().forEach((tasks, index) => {
tasks.forEach(task => {
addTaskCard(task, index)
})
})
const addForm = document.querySelectorAll(".add") 
addForm.forEach(form => {
form.addEventListener("submit", event => {
event.preventDefault()
console.log(form.date)
if(form.task.value.trim()) {
const task = Kanban.insertTask(form.submit.dataset.id, form.task.value.trim(), form.date.value)
addTaskCard(task, form.submit.dataset.id)
form.reset()
}
})
})
taskbox.forEach(column => {
column.addEventListener("click", event => {
event.preventDefault()
const card = event.target.closest(".card")
if (!card) return
//const dateInput = card.querySelector('input[name="date"]');
const dateDisplay = card.querySelector('span');
const formInput = card.querySelector('input[name="task"]')
const dateInput = event.target.closest(".card").querySelector('input[name="date"]')
if(event.target.classList.contains("edit")) {
formInput.removeAttribute("disabled")
dateInput.classList.remove("hide");
dateInput.value = dateDisplay.textContent.trim();
dateDisplay.classList.add("hide")
event.target.classList.add("hide")
event.target.nextElementSibling.classList.remove("hide")
}
if(event.target.classList.contains("update")) {
formInput.setAttribute("disabled", "disabled")
event.target.classList.add("hide")
event.target.previousElementSibling.classList.remove("hide")
dateInput.classList.add("hide")
dateDisplay.classList.remove("hide")
dateDisplay.textContent = dateInput.value
const taskId = event.target.dataset.id
const columnId = event.target.dataset.column
const content =formInput.value
const date = dateInput.value
Kanban.updateTask(taskId, {columnId, date, content})
}
if(event.target.classList.contains("delete")) {
formInput.parentElement.remove()
Kanban.deleteTask(event.target.dataset.id)
}
})
column.addEventListener("dragstart", event => {
if(event.target.classList.contains("card")) {
event.target.classList.add("dragging")
}
})
column.addEventListener("dragover", event => {
const card = document.querySelector(".dragging")
console.log(card)
column.appendChild(card)
})
column.addEventListener("dragend", event => {
if(event.target.classList.contains("card")) {
event.target.classList.remove("dragging")
console.log(event.target.task.value)
Kanban.updateTask(event.target.dataset.id, {columnId: event.target.parentElement.dataset.id, content: event.target.task.value})
}
})
})
function updateTaskCardStyle() {
const now = new Date();
for(const card of cards) {
console.log("YES")
const deadlineInput = card.querySelector('.date')
console.log(deadlineInput)
const deadline = new Date(deadlineInput.textContent)
if (deadline < now) {
card.classList.add('deadline-passed')
}
}
}
window.addEventListener('load', updateTaskCardStyle)

I was expecting a calendar to show up when I click on date input after clicking on the Edit button but it doesnt show up.

The calendar does not automatically open when the element becomes visible. You have to use inputElement.showPicker() to make it visible programmatically.

Reference:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker