vivekvs1/dash-dual-listbox

Dual listbox for Dash. Original component: https://rawgit.com/jyotirmaybanerjee/react-duallist/master/example/examples.html#

dash-dual-listbox's Issues

Callback not working

I'm using the "Usage.py" example code (with comments removed and "Display" Div added) and the Dual Listbox is shown, but I can't get the callback to fire. Is this example current?

from dash_dual_listbox import DualList
import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash('')

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

app.layout = html.Div([
    DualList(id='DualList', available=[{'label': 'sdf', 'value': 'AL'},
                                       {'label': 'Alassdfsdfka', 'value': 'AK'},
                                       {'label': 'Arizona', 'value': 'AZ'},
                                       {'label': 'Arkansas', 'value': 'AR'},
                                       {'label': 'California', 'value': 'CA'},
                                       {'label': 'Colorado', 'value': 'CO'},
                                       {'label': 'sdfg', 'value': 'CT'},
                                       {'label': 'Delaware', 'value': 'DE'},
                                       {'label': 'Florida', 'value': 'FL'},
                                       {'label': 'Georgia', 'value': 'GA'}],
             selected=['AL']),
    html.Div(id='display', children=[])
])


@app.callback(Output('display', 'children'),
              [Input('DualList', 'selected'),
               ])
def display_output(c):
    return c[0]

if __name__ == '__main__':
    app.run_server(debug=True)

Cannot find bundle.js

Installed via pip and tried a minimal example but get the following:
localhost/:26 GET https://unpkg.com/my_dash_component/dash_dual_listbox/bundle.js net::ERR_ABORTED 404

Add selectedLeft and selectedRight properties

The selecetedLeft and selectedRight properties would contain the indexes of available options that are selected/highlighted in the respective listbox before any of the buttons of the dash-dual-listbox is pushed. This allows to add additional buttons that allow the user to modify the content of the option labels, provided that the rendering of the dash-dual-listbox is simultaneously triggered.

React-duallist already exposes selectInLeft and selectInRight function properties that would allow to implement this in dash-dual-listbox. If my experiments prove succesful I will provide a PR for this.