React-select: Inline text with dropdown

[jordymeow]

Hi,

Sorry to ask this here, it's not an issue but a question; I could find anything related to this here or in the documentation. Is it possible to have a text with a dropdown on hover with this component? A perfect example can be found here: https://react.semantic-ui.com/modules/dropdown/ (look for the inline example). That is truly beautiful, and I wonder if it's possible to do this with react-select without hacking into it too much (seems like an inline attribute would be cleaner than overriding all the default styles).

Thanks a lot for your help!

[ebonow]

Threw something together fairly quick and dirty, but it's fairly straight forward once you have the classNames in place.

Here's a sandbox I threw together modifying one of the examples.
https://codesandbox.io/s/react-codesandboxer-example-dx04k

Here's a side-by-side comparison next to the example you posted:

So here's the breakdown...

    <Select
      className="react-select--inline"
      classNamePrefix="react-select"
      components={{
        IndicatorsContainer: () => null
      }}
      isSearchable={false}
      defaultValue={colourOptions[0]}
      options={colourOptions}
    />

1) className - Let's call it _react-select--inline_ so you can reuse it specifically for inline dropdowns
2) classNamePrefix so we can easily target the other dom elements.
3) components - Removing the IndicatorsContainer. We could easily replace the dropdown indicator, but for simplicity, let's just get rid of it and add our own CSS dropdown indicator to better match the example you gave.
4) isSearchable - Setting this to false to remove the ability to type into it

The defaultValue and options are pulled directly from the example, so replace with whatever examples fit your needs.

Nothing complex here right? So, now for the CSS and turns out we only need to target 4 css selectors to make this work (5 including the custom dropdown triangle). I've scoped the classes to the _react-select--inline_ className, so none of this would interfere with any existing styles you have.

/* React Select -- Inline Modifier
* Inline container with margin for better inline spacing between other elements 
*/
.react-select--inline {
  display: inline-block;
  margin: 0 0.25em;
}

/* Remove border, outline, box-shadow, and min-height values */
.react-select--inline .react-select__control {
  border: none;
  outline: none;
  box-shadow: none;
  min-height: none;
  cursor: pointer;
}

/* Tighten up spacing */
.react-select--inline .react-select__value-container {
  padding: 0;
}

/* Position value relative (instead of absolute) and remove transform and max-width */
.react-select--inline .react-select__single-value {
  font-weight: bold;
  position: relative;
  transform: none;
  max-width: none;
}

/* CSS triangle dropdown indicator after the selected value */
.react-select--inline .react-select__single-value::after {
  content: " ";
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #000000 transparent transparent transparent;

  margin-left: 0.25em;
  top: -0.125em;
}

The only things not covered here is the menu styling, which should be straight forward enough for you to customize. (Hint: temporarily setting the prop menuIsOpen={true} will be very helpful in styling the menu)

Please consider closing this issue if this fits your needs to help the mods keep this issue list more maintainable.

[bladey]

Thanks for taking the time to write such a detailed reply @ebonow, much appreciated.

@jordymeow as stated above, let us know if this issue is now resolved, I'm going to preemptively close this issue. I'll re-open it if necessary.

[jordymeow]

Thanks @ebonow, that was actually a very kind answer :) I got it a bit late though, by that time I had already done a bit of hacking by myself. It looks a bit similar to what you did.

That said, I hope the library could provide a simpler/cleaner way to enable us to do this. I guess it is more a feature request that an issue. Thanks to both of you.