1

I am building a shiny app where users have to select cities to show on a map. There are lots of cities in my database, so I am using selectizeInput widgets, with the idea that users can type cities in the text box to select.

However, something weird is happening where when I start typing in the search box, city options appear to be missing characters. Specifically, the characters "an" seem to be messing things up: "San Antonio" and "San Diego" show as "S Antonio" and "S Diego", and "Santa Ana" shows as "Sta Ana". I added "Tangier" to see what happens with an "an" that is not following an "S", and it shows up as "Tan", so I am pretty confused all around. Does anybody know why this is happening or how to fix it?

enter image description here

NOTE: they don't show this error in the dropdown until you type certain characters (I think again, "an"). For example, if you type "San Diego" or "New York", you can select these cities and no errors occur, but if you type "San An-" or "Santa An-", then things start to get weird.

Reprex below:


library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

    # Application title
    titlePanel("test app"),

    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            HTML("Type 'San Antonio' or 'Santa Ana' to reproduce the error."),
            selectizeInput(
                inputId = "test_city_3",
                label = "Reference City 3", 
                choices = c("San Antonio","Santa Ana", "Santa Cruz","Chicago",
                            "New York","San Diego","Tangier"),
                options = list(placeholder = "Reference City 3")
            )
        ),

        # Show a plot of the generated distribution
        mainPanel(
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {

}

# Run the application 
shinyApp(ui = ui, server = server)
Jake L
  • 987
  • 9
  • 21
  • This is certainly bizarre. I don't know the answer, but to explore the issue further, it seems to be something with entering repeating values (not just "an"). For instance, I added a `"Test Teaser"` city (which has a repeating "te" in it) - when I begin to type "Test T" its fine, but when I type "Test Te" it removed "Test" entirely - see a screenshot [here](https://i.stack.imgur.com/DWBdY.png). Perhaps someone smarter then I am will be able to answer! – jpsmith Dec 30 '21 at 21:29

1 Answers1

2

This seems to be a known - but undocumented - bug in selectize.js (which shiny::selectizeInput() uses under the hood). See e.g. this issue on GitHub.

Whenever you repeat a word in your search, that word (or substring) get's removed from all the choices in the list. This is why searching for "San Antonio" and the like will remove "an". For a smaller example, you can search for "s s", and the same error will happen.

Fix:

The only fix I found was to set options = list(highlight = FALSE). Unfortunately this will remove the highlighting all together, but is probably worth it since you have a lot of "san* an*" countries in your list.

Here is the fixed used in a smaller repex based on your code:

library(shiny)

ui <- fluidPage(
    selectizeInput(
        inputId = "test_city_3",
        label = "Reference City 3", 
        choices = c("San Antonio","Santa Ana", "Santa Cruz","Chicago",
                    "New York","San Diego","Tangier"),
        options = list(
            placeholder = "Reference City 3",
            highlight = FALSE
        )
    )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)
jpiversen
  • 3,062
  • 1
  • 8
  • 12