Draggable inputs within a draggable absolutePanel... drag the absolutePanel

[chasec]

I have a shiny app that uses the colourpicker package to allow users to... choose colors. However, when the colourpicker input is within a draggable absolute panel, the whole panel moves when interacting with the colourpicker input. It doesn't make it unusable but users cannot drag across the color-input but instead have to interact with distinct-click-events.

In short the desired interaction would be that the absolutePanel only is dragged when it is dragged, not when an object

library(shiny)
library(colourpicker)

shinyApp(
  ui = fluidPage(
    
    shiny::absolutePanel(
      bottom = "30%",
      right =  "50%",
      width = "20%",
      ##   width = "20%",
      fixed = F,
      draggable =T,
      
        strong("Selected colour:", textOutput("value", inline = TRUE)),
        colourInput("col", "Choose colour", "red"),
        h3("Update colour input"),
        textInput("text", "New colour: (colour name or HEX value)"),
        selectInput("showColour", "Show colour",
                    c("both", "text", "background")),
        selectInput("palette", "Colour palette",
                    c("square", "limited")),
        checkboxInput("allowTransparent", "Allow transparent", FALSE),
        checkboxInput("returnName", "Return R colour name", FALSE),
        actionButton("btn", "Update")
      )
  ),
  server = function(input, output, session) {
    observeEvent(input$btn, {
      updateColourInput(session, "col",
                        value = input$text, showColour = input$showColour,
                        allowTransparent = input$allowTransparent,
                        palette = input$palette,
                        returnName = input$returnName)
    })
    output$value <- renderText(input$col)
  }
)