Simulate action buttons click event

[VisheshSingh]

From my understanding currently, the react-dual-listbox handles the events associated with the action buttons internally, meaning moving the list items between the boxes.

Can we have an option for simulating these actions by calling individual functions like moveLeft(), moveAllLeft(), moveRight() and moveAllRight() ?

[VisheshSingh]

So, I am working on a proof of concept using react-dual-listbox where I want the user to move list items to the box on the right. Once list items are inside the right box I want to submit all the list items from the right box to make a POST request. So, once I submit I would like to simulate the click on action button with two left carets to move back all the items from the right box to the left box

[jakezatecky]

Sorry for the late response.

Yes, this is possible, although it is subject to change with newer releases as it is part of the internal API of the component. The basic way to do this would be to make a React ref to the listbox component and invoke onActionClick. Here is some sample code to do that (along with a live example):

const options = [
    { value: 'one', label: 'Option One' },
    { value: 'two', label: 'Option Two' },
];

class Widget extends React.Component {
  state = { selected: ['one', 'two'] };

  constructor(props) {
      super(props);

      this.listbox = React.createRef();
  }

  componentDidMount() {
      // Call this wherever you want to simulate clicks
      // This is present on `componentDidMount` for illustrative purposes
      this.listbox.current.onActionClick({ direction: 'left', isMoveAll: true })
  }

  onChange = (selected) => {
      this.setState({ selected });
  };

  render() {
      const { selected } = this.state;

      return (
          <DualListBox
              options={options}
              ref={this.listbox}
              selected={selected}
              onChange={this.onChange}
          />
      );
  }
}

[VisheshSingh]

awesome! 😍 thanks @jakezatecky Really appreciate it!

[VisheshSingh]

Leaving it here in case others would like to make use of it.

[jakezatecky]

Closing this due to its resolved status and me wanting to clear out the list of open issues. I hope anyone who needs this functionality can use the search feature to relocate this issue.