Inserting reactive elements in a custom Shiny input

jdtrat · March 4, 2021, 1:26am

Hello! I'm working on a custom input where I would like the user to press a button and have additional textInput elements appear. For reasons that allude me, each time the button is pressed, the number of new inputs doubles. Following this article on dynamic UIs, I call both Shiny.unbindAll() before inserting a new element and Shiny.bindAll() afterwards. Interestingly, when I remove those calls, pressing the button correctly inserts only one textInput. Of course, their values are not accessible by Shiny, though.

I'm relatively new to custom input bindings, so it's probable I don't understand something correctly or have the unbind and bind functions in the wrong place. Any advice on how I can achieve my goal, though, would be greatly appreciated!

You can see the problematic input with this live demo and check the code out here.

ginberg · March 4, 2021, 3:00pm

I have run into something similar a while ago. I found out there's also an unbindAll and bindaAll that accept an element as parameter and it solved the issue.
In your binding this looks like

Shiny.unbindAll(el);
/* logic */
Shiny.bindAll(el);

jdtrat · March 21, 2021, 1:19am

Oh wow, thanks @ginberg! That worked perfectly. Do you know why that parameter is necessary? That is, what is happening behind the scenes when passing el vs. not?

ginberg · March 5, 2021, 6:46am

I am glad it works for you! No, I didn't look into it any further. Maybe you can find it in the shiny repo or someone else here knows the answer?

MayaGans · March 5, 2021, 2:54pm

Trying hard to untangle this but will need some help. It looks like unbindall is a wrapper for unbindinputs and the first argument is the scope for what should be unbound/bound (which is el)....

github.com

rstudio/shiny/blob/1b8635db327a753007b1d7d052b138353745d251/srcts/old/done/init_shiny.js#L208


        type: 'shiny:bound',
        binding: binding,
        bindingType: 'input'
      });
    }
  }

  return inputItems;
}

function unbindInputs(scope = document, includeSelf = false) {
  var inputs = $(scope).find('.shiny-bound-input');

  if (includeSelf && $(scope).hasClass('shiny-bound-input')) {
    inputs.push(scope);
  }

  for (var i = 0; i < inputs.length; i++) {
    var el = inputs[i];
    var binding = $(el).data('shiny-input-binding');
    if (!binding)

...still totally at a loss as to why adding or removing the shiny-input-binding would effect how many html elements are returned as in your example though