How to move the MultiValue to sit just above the input

[LaurenMullally]

Hello!

I've been struggling for a little while now to move the MultiValue and all its lovely insides to sit above the input instead of within the input itself. Is there a simple way to do this that I'm missing? I want it to look and act the exact same as it usually does, but just move the MultiValue just above the input, and have the selected options sit in line, rather than where they currently sit within the input. Every time I try to rearrange them in the control, something breaks. I thought I'd ask as there's no way it's as complicated as I'm making it out to be.

Any help would be greatly appreciated! thanks 😄 🎉

[ebonow]

Hi @LaurenQurashi

Moving the MultiValue lovelies around may or may not be as complicated as it sounds depending on the context.

Just wanted to get some clarification on what you are asking by "look and act the same exact way". Is the intention to move the MultiValues out of the ValueContainer or to keep them within the control but simply on a new line?

1. If the intention is to keep the input on its own line but keep the values inside the ValueContainer component, then you should be able to apply styling flex properties to the Input component (ie: flex: 1 1 100%, order: 1 | 9999 depending on whether you want the input above or below the values.

2. If the intention is to move the values out of the ValueContainer component, then it gets a bit more complicated. Here are some of the considerations:

• We need to render the values outside so shouldControlRenderValue can be set to false
• Encapsulating this new container in the SelectContainer seems like the appropriate option here as it's the outer most element
• We need to render the MultiValues independently in a new container. This means looking at the source code of the props passed to the MultiValue from the Select component and copying those over so that we can know which props are need to be passed. While isFocused seems to be only accessible via the internal state, it also means that we would need to wire up the arrow keybindings which may be a bit confusing based on the relationship of were the values are in relation to the input. That said, most everything else seems to be accessible via the selectProps or commonProps with the exception removeValue.
• The removeValue function is normally passed to the Options from within the context of the Select component using an internal method, so we need to track the selected values and which to remove by creating a controlled input meaning we track state of the values and use the onChange handler to update the values so that we can also create a new removeValue prop which can be accessed via the selectProps passed to this new container.
• Finally, we need to make sure the styling of the value container remains in grid even if there are values

Here's what a possible implementation looks like:

Codesandbox example

import React, { useCallback, useState } from "react";
import Select, { components } from "react-select";
import { compliments } from "../data/options";

const App = (props) => {
  const [value, setValue] = useState();

  const onChange = useCallback((newValue) => setValue(newValue), []);
  const removeValue = useCallback(
    (removed) => setValue(value.filter((v) => v.value !== removed.value)),
    [value]
  );

  const styles = {
    valueContainer: (css) => ({ ...css, display: "grid" })
  };

  return (
    <Select
      isMulti
      value={value}
      onChange={onChange}
      removeValue={removeValue}
      options={compliments}
      components={{ SelectContainer }}
      controlShouldRenderValue={false}
      styles={styles}
    />
  );
};

const SelectedValuesContainer = ({ isDisabled, getValue, ...props }) => {
  const { getOptionValue, formatOptionLabel, removeValue } = props.selectProps;

  const getValueLabel = (opt) => formatOptionLabel?.(opt, "value") || opt.label;
  const getKey = (opt, index) => `${getOptionValue(opt)}-${index}`;

  const toMultiValue = (opt, index) => (
    <components.MultiValue
      getValue={getValue}
      {...props}
      components={{
        Container: components.MultiValueContainer,
        Label: components.MultiValueLabel,
        Remove: components.MultiValueRemove
      }}
      //isFocused={isOptionFocused}
      isDisabled={isDisabled}
      key={getKey(opt, index)}
      index={index}
      removeProps={{
        onClick: () => removeValue(opt),
        onTouchEnd: () => removeValue(opt),
        onMouseDown: (e) => {
          e.preventDefault();
          e.stopPropagation();
        }
      }}
      data={opt}
    >
      {getValueLabel(opt)}
    </components.MultiValue>
  );

  return (
    <div style={{ margin: ".5rem 0", display: "flex", flexFlow: "row wrap" }}>
      {getValue().map(toMultiValue)}
    </div>
  );
};

const SelectContainer = ({
  children,
  className,
  innerProps,
  isFocused,
  ...commonProps
}) => {
  const selectContainerProps = {
    ...commonProps
  };

  return (
    <components.SelectContainer
      className={className}
      innerProps={innerProps}
      isFocused={isFocused}
      {...selectContainerProps}
    >
      <SelectedValuesContainer {...commonProps} />
      {children}
    </components.SelectContainer>
  );
};

export default App;

Hope this is a helpful start for what you are working on. Cheers!

[LaurenMullally]

Thank you so much for this! @ebonow 🎉 It's really helpful and I super appreciate the effort you've put in to explain 😄 the second intention was 100% what I am going for, so the example helps massively, thank you again! you're a lifesaver 🥇

[satonin12]

how did I suffer for a long time with the fact that I needed a custom container Control or ValueContainer and even on ts and not to flatter children.props.children , your solution just saved me, thank @ebonow !!!

[bhardy]

I'm really happy I found this. I think you may want to consider adding it to the docs or making it a first-class option. We almost didn't use react-select because this feature wasn't available!

[AskAlice]

There are tons of typescript errors with this example