ipywidgets.Play doesn't work when the control is added after the map.

[lopezvoliver]

As mentioned in the title, adding a control with a Play widget after the map is displayed somehow messes up the Play widget.

Here's the code to reproduce the normal behavior:

import ipyleaflet
import ipywidgets

m = ipyleaflet.Map(zoom=5, center=(40,-120))
play = ipywidgets.Play()
slider = ipywidgets.IntSlider(max=10)
box = ipywidgets.HBox(children=[play,slider])
control = ipyleaflet.WidgetControl(widget = box, position="topright")
ipywidgets.jslink((play,'value'),(slider,'value'))
m.add(control)
m

Here's what happens if we move the m.add(control) line to another cell:

Here's a slightly larger reproducible example that might be useful:

1. Add the control with the slider to the map and display the map.
2. In a new cell, display the Play widget. It works as expected.
3. In a new cell, add the Play widget to the map --> the issue is reproduced.

[lopezvoliver]

A workaround for this is to add the ipyleaflet.WidgetControl with an empty HBox widget (or VBox). The Play widget can be added later to the box and works as expected:

import ipyleaflet
import ipywidgets

m = ipyleaflet.Map(zoom=5, center=(40,-120))
play = ipywidgets.Play()
slider = ipywidgets.IntSlider(max=10)
box = ipywidgets.HBox()  # Empty box
control = ipyleaflet.WidgetControl(widget = box, position="topright")
ipywidgets.jslink((play,'value'),(slider,'value'))
m.add(control) # Add empty control BEFORE displaying map
display(m)

and then..

box.children = [play, slider]