Search code examples
javascriptreactjsdropdownplaceholdercontentplaceholder

Dropdown hint is not visible in React code


I have a TagPicker which extends component. This is how I render the Dropdown:

render() {
const { options, value, disabled, t } = this.props;
const trigger = <Icon name="tags" className="iconTagPicker" />;
return (
  <Dropdown
    trigger={trigger}
    allowAdditions
    disabled={disabled}
    fluid
    multiple
    onAddItem={this.newTag}
    onChange={this.onChange}
    options={options}
    placeholder="Hello"
    search
    selection
    selectOnBlur={false}
    value={value}
    className="tagPicker"
  />
);
}
}

As you can see the placeholder is there, but even so, nothing is visible. why?

This is how the html park looks like:

https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/QHJNvvzMSUziV9m/upload.png

If I remove the trigger, I will have the placeholder, but no icon, how can I make it so that the icon will not make the placeholder go away?

DropDown: https://react.semantic-ui.com/modules/dropdown#dropdown-example-icon


Solution

  • Changing this: trigger={trigger} into icon={trigger} worked. Was not aware that a icon trigger will make the placeholder disappear.