Editor Datetime keyInput working

Editor Datetime keyInput working

patdavidpatdavid Posts: 5Questions: 2Answers: 0

This is an odd one that I can only replicate on Chrome (Firefox works fine).
I have a datetime field in my datatable. When I select a row and edit it, I get the edit modal and can edit the date field.

On FF, I can highlight that input field, delete it, and then manually type in a date like 1999-02-01.
Without clicking anything else, I can hit Enter or click on the Update button in the modal, and the correct values are sent to the server.

If I do the same thing in Chrome (Version 123.0.6312.86 (Official Build) (64-bit)), the new value does not get passed for some reason.

I've found that if i manually enter a value, then tab to the next field, and then click update, it works.
If I manually enter the date, then click in the input field again it will pop-up the date picker, and then clicking update, it works.

If I manually type in a date and immediately click Update (or hit Enter), it does not pass the new value.

Any ideas or thoughts about how to handle this?
My users often just select that field and type in a date manually.

Replies

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    Odd, I'm not seeing here on Version 123.0.6312.58 (Official Build) (64-bit) Ubuntu. Does it reproduce for you on that page?

    Colin

  • patdavidpatdavid Posts: 5Questions: 2Answers: 0

    @colin - I actually tried it out on that page also and couldn't reproduce. (Although I did find a weird display bug with the datepicker I'll try to report separately).

    I'm in the process of trying to spool up an example that I can reproduce with on live.datatables.net.

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    This here might be a good starting point - it's a standard Editor setup.

    Colin

  • rozrorozro Posts: 5Questions: 1Answers: 0

    Same issue here.
    I still didn't manage to find the root cause.

    If you select date from datepicker it works 100%.

    If you write manually a date with datepicker open, it updates in real time showing the correct date and the value is correctly sent.

    If you click on the input, the datepicker shows up. If you manage to close it ( with ESC for example, but you have to keep editor form open ) and you write manually a date, it sends nothing or the previous value, like if the value is not read in realtime from the input but it's stored somewhere in the plugin.

    I'll try to make a live demo.

  • rozrorozro Posts: 5Questions: 1Answers: 0

    Ok i think i reproduced it.

    It seems the issue happens only if "wireFormat" property is set.

    https://live.datatables.net/lujonira/1

    As i said before: when you click on a datetime input, the datepicker shows up.
    Press ESC and it disappears.
    Every value you type now will not be saved.

    If datepicker is shown or you use it, it works fine.

  • rozrorozro Posts: 5Questions: 1Answers: 0

    @colin can you reproduce the bug now? Any chance to get it fixed soon?

  • allanallan Posts: 63,281Questions: 1Answers: 10,425 Site admin

    I've just tried to reproduce the error based on your description:

    1. Load https://live.datatables.net/lujonira/1/edit
    2. Select the top row in the table by clicking on it
    3. Click the "Edit" button
    4. Click the "Start date" input field. The date picker shows
    5. Press Esc. Date picker disappears.
    6. Change the year in that same input using the keyboard
    7. Click the "Update" button
    8. The table shows the changed value.

    Did I do the sequence that was expected to show the issue? If not, can you list it out step by step please?

    Allan

  • rozrorozro Posts: 5Questions: 1Answers: 0
    edited June 24
    1. Load https://live.datatables.net/lujonira/1/edit
    2. Select on row in the table by clicking on it
    3. Click the "Edit" button
    4. Click the "Start date" input field. The date picker shows
    5. Delete the value by using Backspace
    6. Press ESC. The date picker hides.
    7. Type manually a date in YYYY/MM/DD format. Make sure the date picker is NOT visible.
    8. Click the "Update" button
    9. The table updates the row with empty value.
Sign In or Register to comment.