Selectize dropdown does not disappear after submit

fabianrott · April 2016

Hi!
Using Selectize fields in editor, I get some strange behaviour: I submit while the Selectize dropdown is still open (via return key in main editor mode or by calling editor.submit() on tab key press in inline mode). The form is properly submitted, Editor closes and DataTables shows the updated data, but the dropdown does not disappear. It stays right in place (main editor) or moves to the top left corner (inline).

The Firefox debug tools tell me that the dropdown div stays on display: block instead of being set to display: none. Chrome and Safari change this property like expected.

I have been searching for a solution for quite a while now, but I wasn't successful. Unfortunately, I can't provide a working example, since my setup is on a closed network and DataTables live is no help either, since Editor can't submit data and thus never closes, so the problem never occurs.

allan · April 2016

Hi,

Thanks for your question. Could you possibly try the latest plug-in code from here if you haven't already. I've just tried to reproduce this locally but haven't been able to do so. When I hit return the form submits and the Selectize list disappears.

Regards,
Allan

fabianrott · April 2016

Hi Allan!
Yes, I already use the latest plug-in code.
Have you tried it with activated multi select? If there is only one item allowed to choose, the dropdown closes after selecting.

I set the options for Selectize server side with (perl code):

$field->{type} = 'selectize';
$field->{attr} = {multiple => 'true'};
$field->{opts} = {
    create => 'true',
    plugins => ['remove_button','drag_drop'],
    searchField => 'value'
};

In addition to this problem, I have two more questions regarding Selectize fields:

Currently, the change detection doesn't seem to work properly. I have set Editor to submit allIfChanged which works on regular tables. But if the table contains a Selectize field, the form always submits, even if I inline edit other fields. Is this a problem with my Selectize setup, or does the array based data confuse Editor?
I have activated the remove_button plug-in for Selectize. This displays an 'x' next to each item to remove it. Problem is, as soon as I click it, Editor interprets the click as a blur and submits the form. Is there a possibility to circumvent this?

Thank you for looking into this!

allan · April 2016

Hi,

I'm really sorry for the delay in me looking into this! I've just been digging into the issues you are, and unfortunately I've not yet been able to recreate the issue with the selectize list staying on screen. You note that it happens when you press tab - are you using KeyTable or something else to handle the tabs (since they don't do anything by default)?

Regarding the other points - the close button is being caused by the fact that Selectize is "seeing" the event before Editor does. There is code in Editor that should stop that, but because Selectize is able to detect the event before it bubbles up the DOM to Editor the effect you see of the form closing occurs.

I plan to rework how this works in Editor, but I'm afraid that will be v1.6 before that happens as it is potentially quite a large change to that part of the code.

The allIfChange always submits because of the array value. Its a different array, therefore it always submits. I have considered trying to json encode the value to check if it is the same value, but that also has flaws. I don't have a good solution for this one yet I'm afraid, but it is something I've got logged to look into.

Regards,
Allan

fabianrott · May 2016

Hi Allan!
I appreciate you looking into this.

I do use KeyTable, but deactivate it while editing Selectize fields - otherwise I couldn't select entries from the dropdown with the arrow keys. Therefore, I have to handle the tab key manually. But a quick test shows me that the problem also occurs with KeyTable activated, or without any hacks regarding key handling, if you select an entry and submit an inline edit via return key.

I've stripped down my code as far as possible, but the problem remains. I also just tested the result on IE and Firefox on Windows (normally I use MacOS X).

FYI: The relevant libraries I use are:
DataTables 1.10.11, Editor 1.5.5, Selectize 0.12.1, jQuery 2.1.4
jQuery isn't up to date, but using 2.2.3 doesn't fix this either.

It would be great if Editor could handle the click on the remove button, I hope you find a way to do this in future Editor versions.

About the array data: Ah, that explains a lot. Looks like I have to deal with that for now.

allan · May 2016

Are you able to send me a PM with a login to your system so I can debug the Selectize remaining issue please? I've been trying to recreate the issue locally and don't seem to be able to. Click my name above and then the "Send message" button to send a PM.

Thanks,
Allan

fabianrott · May 2016

Hi Allan!
In case you missed it, I have sent you a PM on May 13.
It would be great if you could help out.

Regards

allan · June 2016

Apologies - I should have recalled that you did send the login details.

Could you possibly update the libraries you are using to the latest versions please. For example Editor 1.5.5 is being used on the page while 1.5.6 is the current release. I haven't been able to reproduce the problem locally so I'm hoping it has been resolved already.

It would be great if Editor could handle the click on the remove button, I hope you find a way to do this in future Editor versions.

That is coming in v1.6. I'm going to introduce a new API that the plug-ins can hook into.

Allan

fabianrott · June 2016

Hi!
I updated the libraries on the demo server to the current release versions.
Unfortunately, the Selectize dropdowns still stay on screen for me using Firefox.

That is coming in v1.6. I'm going to introduce a new API that the plug-ins can hook into.

This is good to hear!

fabianrott · July 2016

Hi Allan!
Could you please take another look at the demo setup?

Regards,
Christoph

allan · July 2016

Hi Christoph,

Sorry for the delay - I'm a little swamped with support requests at the moment and my response time is suffering as a result!

I've just tried your page in Firefox doing the following:

Select row id 1
Click the Bearbeiten button
Focus on the Selectize field - the selectize list is shown
Click submit. The selectize list is hidden.

I haven't been able to recreate the case where it would be shown at the top of the page. Have I missed a step to make that happen?

Allan

fabianrott · July 2016

Hi Allan!
Thanks for your answer!

The thing is, the problem doesn't occur if you submit by mouse click.

So, to recreat the problem, try as follows:
1. Select a cell in the Selectize column ('Rolle')
2. Enter inline editing via mouse click or key press
3. Select an item from the list
4. Submit via tab key

Now there should be a list with the remaining selectable items in the upper left corner.

Alternatively, in main editor:
1. Do steps 1-3 from your list
2. Submit via return key

Now the dropdown should stay right where it was, while the editor window behind it is closed.

In both cases, it disappears as soon as you click with your mouse. If you only navigate with your keyboard, it stays as long as you enter inline edit mode on a Selectize cell again and until you select another item from the list in the upper left corner.

Regards,
Christoph

fabianrott · August 2016

Hi Allan!
Could you reproduce the misbehaviour?

Regards

allan · August 2016

Sorry for the delay. Yes, thanks for the instructions.

It looks like this is a known "issue" / feature of Selectize. I've added a little bit of code to the Selectize plug-in for Editor which addresses this issue.

I'm not sure why it is different in Firefox, but the event handler is harmless in other browsers.

Allan

fabianrott · August 2016

Hi!
Thank you for your efforts. I included the additional code on the demo server.
I'm afraid, this fixes the problem only partially. Yes, the dropdown disappears, but if you enter inline edit again afterwards (only using keyboard navigation), the dropdown is in the upper left corner again, until you select a new, delete an existing item or start typing to create a new entry, which updates the list.

So, step by step:
1. Select a cell in the Selectize column ('Rolle')
2. Enter inline editing via mouse click or key press
3. Select an item from the list
4. Submit via tab key
5. Navigate to a cell in the Selectize column again using arrow keys
6. Press return key to enter inline edit mode

Now the dropdown should appear again in the corner.
For some reason, Firefox seems to call the positioning function for the dropdown at the wrong time.

Christoph

fabianrott · September 2016

I just tried it again with IE11 on Windows 10. There, the dropdown appears in the upper left corner, but almost completely left outside of the visible area.

allan · September 2016

I've just tried to do some debugging in the Selectize code, but haven't been ably to identify why this is happening yet. I'll try to make some time to go through their code a bit closer, but it might take a little while since I'm not familiar with their code base.

Allan

Selectize dropdown does not disappear after submit

Selectize dropdown does not disappear after submit

Replies

Howdy, Stranger!

Categories

DataTables

Selectize dropdown does not disappear after submit

Selectize dropdown does not disappear after submit

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables