How can I add floating label to react-select? - reactjs

Question

I'm trying to build web app using MaterialUI theme and I need to use autocomplete .. It turns out MUI v2 does not have AutoComplete and docs suggest using alternatives. react-select has all functionality I need - but I cannot figure out how to make it look similarly to other controls - specifically how to make floating label to float away when user starts typing or click on dropdown.
What I did:
created a component (IntegratedSelect) that uses react-select from this demo
cloned this file into CustomAutocomplete.jsx and replaced <Input> with <IntegratedSelect>
modified code to pass id to IntegratedSelect and set that id to Select control
.. and tried a lot of different other approaches (setting refs, using FloatingLabel from #material/react-floating-label etc).. with no luck.
Can you please advise how can I trigger float on the label, or otherwise hookup react-select control with floating label?
Any help will be appreciated!
Regards,
VB
P.S. Gist added: https://gist.github.com/mspclaims/e07bf1ff657fa8eb4756bc0514a164fe

Answer 1

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