FixedHeader and Column Filters

FixedHeader and Column Filters

p.dobrevp.dobrev Posts: 9Questions: 1Answers: 0
edited July 2021 in FixedHeader

Hi guys,
I have a weird bug when using FixedHeader and having custom column filters like in this example

The problem is that when you are writing "fast"... meaning typing at normal speed, sometimes it misses out the letters you had entered. It's really uncomfortable, because suddenly the word you are typing is missing letters.

I believe it's due to update and blur methods in FixedHeader, because the outline blinks on each keyup. When I turn off the FixedHeader there is no outline blink or any other problems.

Anyone has a workaround or a solution? Thanks in advance!

Regards,
Plamen Dobrev

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Are you using server side processing? If so it could be the delay in fetching the data. You can use something like searchDelay to help. If this doesn't help please post a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • p.dobrevp.dobrev Posts: 9Questions: 1Answers: 0

    Hi @kthorngren

    I have provided test case in my original post, there is a link to live.datatables.net, but here is it, unformatted: http://live.datatables.net/hepeqiro/1/edit

    I do not use server side processing, it's standard pre-filled table, just as in the test case. The problem is only when FixedHeader is active!

    Regards,
    Plamen

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited July 2021

    I tried the test case but it doesn't seem to have a delay. Do you experience a delay with the test case? If you do please provide the steps to replicate the delay.

    EDIT: I do see the outline blinking but no slowdown in typing.

    Kevin

  • p.dobrevp.dobrev Posts: 9Questions: 1Answers: 0
    edited July 2021

    It's very very inconsistent, try to type down long word several times into different inputs and I am sure it will skip a letter at some point. Another time it happens is when
    I try to clear the input with CTRL+A and BACKSPACE pressed quickly. It skips the BACKSPACE inconsistently.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    The blinking is annoying for sure :smile: I'll let the developers @allan or @colin take a look. Maybe they will notice something with their code that can be chagned.

    Kevin

  • p.dobrevp.dobrev Posts: 9Questions: 1Answers: 0

    Alrighty, I will wait.

    Thanks, Kevin! Have a great day!

    Regards,
    Plamen

  • p.dobrevp.dobrev Posts: 9Questions: 1Answers: 0
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Yep, thanks, I mentioned that one to Allan as I spotted that myself. It's on his list so he'll get back soon,

    Colin

  • p.dobrevp.dobrev Posts: 9Questions: 1Answers: 0

    Alright, thanks for the info @colin

    Good luck @allan

    And @colin @allan Thank you so much for this amazing plugin! It's amazing what have you done and how effortless is to use.

    Regards,
    Plamen Dobrev

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Hi Plamen,

    Thanks for reporting this to us. I've just committed a fix for the issue and it will be in the nightly shortly.

    Allan

  • p.dobrevp.dobrev Posts: 9Questions: 1Answers: 0

    Hi @allan

    Thanks a lot for the quick response! I managed to update with NPM and now it works as expected... If you don't count the strange errors that overall doesn't break it :D

    Basically when I scroll down (the header becomes fixed) and in a column filter write something that does NOT exist (like "dasdas" in the Name column) there is an error "Uncaught TypeError: Cannot read property 'top' of undefined at FixedHeader._positions"

    Then when I clear the filter input and scroll down again it gives an error "Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?"

    http://live.datatables.net/kezafohu/3/edit here is a test case

    But in overall, even though those errors, it works as expected
    Regards,
    Plamen

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    That is a weird one! I couldn't reproduce it at all locally, but 100% could with your example.

    I've put a guard around the update and that corrects it now.

    Allan

  • p.dobrevp.dobrev Posts: 9Questions: 1Answers: 0

    Yeah, I had to copy parts of my code, because with simpler cases it wasn't bugging.

    I tried the updated code, but the second error

    Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?

    When I enter something that doesn't exist and then clear the filter input and scroll down again still persists :/

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Is that happening for you here? The previous version was using the cached old nightly (at least for me). I've just tried Firefox and Chrome and it appears to run okay now.

    Allan

  • p.dobrevp.dobrev Posts: 9Questions: 1Answers: 0

    Hey @allan
    You can see a quick video I did https://drive.google.com/file/d/1brXYnEpqfm8pDkhzDzBkRqBi7StBqkhr/view
    The same happens on my website :/

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited July 2021

    I tried the happening for you here example and still see the error. I'm using Chrome on the Mac. In the Name column select Not Contains. Type anything in the filter then clear it. Next scroll up to see the error,

    EDIT: I did clear my browser's cache to get the current nightlies.

    Kevin

Sign In or Register to comment.