reactivesearch icon indicating copy to clipboard operation
reactivesearch copied to clipboard

[MultiDropdownList] Having the possibility to open/close

Open kud opened this issue 6 years ago • 6 comments

Affected Projects React.js / Web

Is your feature request related to a problem? Please describe. As a developer, I would like to be able to manage the fact the dropdown is displayed or not via for instance having isOpen as prop and not state.

Additional context I would like to close the dropdown everytime the user clicks on an item in the dropdown.

kud avatar Nov 18 '19 13:11 kud

Can you please tell in which component you're getting the issue? Does render prop not work for your use-case?

bietkul avatar Nov 18 '19 14:11 bietkul

It's on MultiDropdownList. I don't see any way to open and close the dropdown by myself in fact.

I could use MultiDataList and rendering the whole thing by my self but it could be a shame because I want the dropdown like you did on MultiDropdownList

I just need to be able to open and close the dropdown via a prop in MultiDropdownList.

kud avatar Nov 18 '19 14:11 kud

var Dropdown = function (_Component) {
	_inherits(Dropdown, _Component);

	function Dropdown(props) {
		_classCallCheck(this, Dropdown);

		var _this = _possibleConstructorReturn(this, _Component.call(this, props));

		_this.toggle = function () {
			_this.setState({
				isOpen: !_this.state.isOpen
			});
		};

Here you've got a state, that means you can't handle it externally.

kud avatar Nov 18 '19 14:11 kud

It can be handled with the render method but it doesn't make sense to render the complete UI for this minor functionality, I think the quick solution will be to provide access to the ref of Downshift component.

bietkul avatar Nov 18 '19 14:11 bietkul

Can't I play with downshiftProps like something:

                  downshiftProps={{
                    isOpen: true,
                  }}

(this one doesn't work for the moment)

?

kud avatar Nov 21 '19 13:11 kud

Apparently no: https://github.com/appbaseio/reactivesearch/blob/next/packages/web/src/components/shared/Dropdown.js#L143

kud avatar Nov 21 '19 13:11 kud