score:2

following this comment on a similar issue on github, i was able to get it to work! in my case, i'm using styled-component but it should work regardless of the styling used

import react from "react";
import styled from "styled-components";
import { components } from "react-select";

export const control = (props: any) => {
  return (
    <>
      <label isfloating={props.isfocused || props.hasvalue}>select</label>
      <components.control {...props} />
    </>
  );
};

const label = styled.label<{ isfloating?: boolean }>`
  left: 10px;
  pointer-events: none;
  position: absolute;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  z-index: 1;

  top: ${(props) => (props.isfloating ? `5px` : `35%`)};
  font-size: ${(props) => (props.isfloating ? `0.5rem` : `1rem`)};
`;

you can add your custom control component to select:

<select 
  ...
  components={{ control }} 
  placeholder=""
/>

note: you must ensure your select component doesn't have an empty default value otherwise, hasvalue will always be true


Related Query

More Query from same tag