Search doesn't getting cleared after expanding subtasks

Gantt
#1

Hi,
I ran into a weird problem. I have parent-tasks with some children underneath it and a search bar where I can filter the parent-task based on the name.
I’m not able to clear the search value when I expand the children from the parent task. It got stucks from there.

I have attached the code snippet for your reference.
https://snippet.dhtmlx.com/5/11f13933c

Steps to recreate:

  1. In the search tasks bar, type for the parent task name, and then the parent tasks will be listed.
  2. Click on the expand icon in the parent task.
  3. Now, try to clear the search. (The task didn’t get refreshed)

Could someone help me understand on, what I’m missing here?

#2

Hello @manzi,

The issue occurs, because you are attaching the “input” listener to the #searchTask element only one time after the document is loaded:

document.getElementById("searchTask").addEventListener('input', (data) => {
  filterValue = data.target.value;
  gantt.refreshData();
});

The expanding of the task invokes the “gantt.render()” which redraws gantt elements(including the #searchTask ), and it reappears but without already “input” listener.

The easiest way to fix it is to replace adding “input” event listener, with oninput" property, like in the fragment below:

label: "<input data-text-filter 
id='searchTask'	
oninput='changeDetector()'  
type='text' 
placeholder='Search tasks' 
class='search-task-wrap'>"

Here is the updated snippet(I marked the updated part by comments):
http://snippet.dhtmlx.com/5/6207190d2

#3

I’ve to stick with the eventListener due to Content Security Policy(CSP). The eventListener would be safer than this oninput/onchange.

And I found a workaround, In the search result, if the eventListener is fire again when expanding the parent task. It’s working good. Is there any nicest approach to achieve this?

1 Like
#4

Hello @manzi,

Looks like you found a nice workaround to avoid the issue.