Remove (All) selection from filter_select

[danielludolf]

I was following Figure 16.7's example from https://plotly-r.com/client-side-linking.html and cannot figure out why there is a selection called "(All)" or how to remove it. Please view issue at https://rpubs.com/danielludolf/855504

[danielludolf]

Installing version 1.1.1 of crosstalk fixed the error and "(All)" is no longer showing up in the selections. I was using a later version of crosstalk so I could use the selected argument, still something to look into.

[feddelegrand7]

I have the same issue. Installing 1.1.1 removes the "All" value but when you remove all the filter values, the whole data is not showed.

[PKData]

Also had the same issue. Installed 1.1.1 to fix. Found users to have a very hard time ignoring the "(All)" given it's location.

[mmfc]

This still occurs with 1.2.0, anyone got any custom JS to remove the (All) option?

[fawda123]

@mmfc I'm also still seeing it with v1.2.0.

[mmfc]

This JS works, but obviously is limited to only running onload:

function remove_all_option() {
  document.getElementById("Your ID Here").getElementsByClassName("selectized")[0].selectize.removeOption("");
}
window.onload = remove_all_option;

[asadow]

This JS works, but obviously is limited to only running onload:

function remove_all_option() {
  document.getElementById("Your ID Here").getElementsByClassName("selectized")[0].selectize.removeOption("");
}
window.onload = remove_all_option;

I have not heard the expression onload before. Does this mean on devtools::load_all()?

[mmfc]

onload is a JavaScript event handler (I think, I'm not great on JS terminology), which triggers when the whole HTML document has been loaded into your web browser (i.e. everything has been computed)

[dexterpante]

This JS works, but obviously is limited to only running onload:

function remove_all_option() {
  document.getElementById("Your ID Here").getElementsByClassName("selectized")[0].selectize.removeOption("");
}
window.onload = remove_all_option;

I tested this but I can't get it work.

[dexterpante]

This JS works, but obviously is limited to only running onload:

function remove_all_option() {
  document.getElementById("Your ID Here").getElementsByClassName("selectized")[0].selectize.removeOption("");
}
window.onload = remove_all_option;

Do I have to install an R package to maket this work? What package is that?

[mmfc]

I've known this to not work in Firefox, it might be better to replace "window.onload" with "$(document).ready" to be more cross-browser compatible. You'd need to give an example of your not working code to be able to advise anything, but it is JS that will work with all the dependencies that are installed with Crosstalk (i.e. JQuery), so no additional packages.

[dexterpante]

I've known this to not work in Firefox, it might be better to replace "window.onload" with "$(document).ready" to be more cross-browser compatible. You'd need to give an example of your not working code to be able to advise anything, but it is JS that will work with all the dependencies that are installed with Crosstalk (i.e. JQuery), so no additional packages.

I have replaced the "window.onload" with "$(document).ready" as suggested but I can't get it work. I am not expert on Javascript as I am more of a data analyst rather than web programmer. These are the codes I am working on which I learned from this thread and from stackoverflow.

I have 2 objectives. First is to set the default value of the filter to empty string, so that the ouptput (which is a map) will not display anything and second, to remove "All" in the drop down filter option since I have set the multiple parameter in the filter_select as FALSE.

function filter_default() {
    document.getElementById("Division").getElementsByClassName("selectized")[0].selectize.setValue("", false);
}
$(document).ready = filter_default;
function remove_all_option() {
    document.getElementById("Division").getElementsByClassName("selectized")[0].selectize.removeOption("");
}
$(document).ready = remove_all_option;

This chunk of JS appears after the R code which created the filter select. This is the code for the filter select:

filter_select(
  id = "Division",
  label = "SDO",
  sharedData = sd,
  group = ~Division,
  multiple = FALSE
)

Does the location of the JS matter here? I tried both approach where I put the JS before and then after the R code but it doesnt have any effect.

[mmfc]

When you say it isn't working, in what way is it not working?

The location of the JS shouldn't matter.

From memory, when no options are selected in Crosstalk, all data is shown rather than no data. In your function calls, you should combine these into one function which is called by $(document).ready, e.g.

function filter_defaults() {
    document.getElementById("Division").getElementsByClassName("selectized")[0].selectize.setValue("", false);
    document.getElementById("Division").getElementsByClassName("selectized")[0].selectize.removeOption("");
}
$(document).ready = filter_defaults;