Adding floating labels to Creatable Select

[ag288]

Hi ! Thanks for this wonderful library that has made dropdowns much more robust and easy to work with :)
I would just like to know if there was some way of including floating labels with the Creatable Select component? This is what i have done so far

import { extendTheme } from "@chakra-ui/react"

const activeLabelStyles = {
    transform: 'scale(0.85) translateY(-24px)',
}

export const theme = extendTheme({
    components: {
        Form: {
            variants: {
                floating: {
                    container: {
                        _focusWithin: {
                            label: {
                                ...activeLabelStyles,
                            },
                        },
                        'input:not(:placeholder-shown) + label, .chakra-select__wrapper + label, .react-date-picker + label': {
                            ...activeLabelStyles,
                        },
                        label: {
                            top: 0,
                            left: 0,
                            zIndex: 2,
                            position: 'absolute',
                            backgroundColor: 'white',
                            pointerEvents: 'none',
                            mx: 3,
                            px: 1,
                            my: 2,
                            transformOrigin: 'left top'
                        },
                    },
                },
            },
        },
    },
})

Unfortunately, the placeholder covers up the selected value when focus leaves the component, and I haven't been able to figure out a way to apply the above theme to the CreatableSelect. This is what my CreatableSelect looks like :

<FormControl id="place" isRequired>
    <FormLabel>Place</FormLabel>
    <CreatableSelect size='xl'
        name="place"
        options={locality}
        closeMenuOnSelect={true}
        value={place}
        tabSelectsValues
        onChange={setPlace}
        openMenuOnFocus
        placeholder={"Select/Type a place"}
    />
</FormControl>

[csandman]

I can't tell exactly what effect you're going for, do you have a picture of an example? Or possibly a code sample of the same effect working in another context?

[ag288]

The "place" field is the CreatableSelect field. As you can see above, the floating label remains on top when the field is focused. But when the focus moves away, the label covers the selected input as you can see in the image below.

I would like to be able to implement an effect similar to what is seen in the other fields like "pincode", "street", etc, where the label remains on top of a filled field even when it is not focused.

import { extendTheme } from "@chakra-ui/react"

const activeLabelStyles = {
    transform: 'scale(0.85) translateY(-24px)',
}

export const theme = extendTheme({
    components: {
        Form: {
            variants: {
                floating: {
                    container: {
                        _focusWithin: {
                            label: {
                                ...activeLabelStyles,
                            },
                        },
                        'input:not(:placeholder-shown) + label, .chakra-select__wrapper + label, .react-date-picker + label':
                        {
                            ...activeLabelStyles,
                        },
                        label: {
                            top: 0,
                            left: 0,
                            zIndex: 2,
                            position: 'absolute',
                            backgroundColor: 'white',
                            pointerEvents: 'none',
                            mx: 3,
                            px: 1,
                            my: 2,
                            transformOrigin: 'left top'
                        },
                    },
                },
            },
        },
    },
})

The entire form is wrapped in a Chakra provider that uses the above custom theme
The above code works for all other input fields - eg : the "street" field is shown below

<Box>
    <FormControl id="street" variant='floating' isRequired>
        <Input placeholder=' ' type="text" style={inputStyle} {...register("street")} />
        <FormLabel>Street</FormLabel>
    </FormControl>
</Box>

Thanks for the time! :)

[csandman]

This was an interesting challenge for me so I gave it a shot! I ended up coming up with two ways to do this, one of which involved a small patch I added into the most recent version of chakra-react-select, 3.2.0.

First Way

The first way which was simple enough to add in the way chakra-react-select previously worked was just to check if a value was selected and add the custom style to the label manually. Here's an example of how to do that:

CodeSandbox: https://codesandbox.io/s/chakra-react-select-floating-labels-6eyic1?file=/example.js

import { useState } from "react";
import { FormControl, FormLabel } from "@chakra-ui/react";
import { CreatableSelect } from "chakra-react-select";

const Example = () => {
  const [place, setPlace] = useState();

  const labelProps = {
    ...(!!place && { transform: "scale(0.85) translateY(-24px)" })
  };

  return (
    <FormControl id="place" isRequired variant="floating">
      <FormLabel {...labelProps}>Place</FormLabel>
      <CreatableSelect
        name="place"
        className="chakra-react-select__wrapper"
        classNamePrefix="chakra-react-select"
        options={locality}
        closeMenuOnSelect={true}
        value={place}
        tabSelectsValues
        onChange={setPlace}
        openMenuOnFocus
        placeholder=" "
      />
    </FormControl>
  );
};

Second Way

After messing around with this I realized there was a simple change I could add to my most recent version that was already in progress that would allow you to add this style in a way that already falls into line with the way you have your theme set up. I added the --has-value className to the Select container when a value is selected so you can do it like you have the rest. In order to use this change, update to version 3.2.0.

The first step to using this is to add the classNamePrefix prop to your select, without that the --has-value class modifier will not be added to your component. So for example, if I put the prop classNamePrefix="chakra-react-select" on the CreatableSelect component, then the className chakra-react-select--has-value will be added to the outermost container when an option is selected. So first I changed your custom selector in your theme:

input:not(:placeholder-shown) + label, .chakra-react-select--has-value + label, .chakra-select__wrapper + label, .react-date-picker + label

And then I modified the select like so:

CodeSandbox: https://codesandbox.io/s/chakra-react-select-floating-labels-alt-vjlmzo?file=/example.js

import { useState } from "react";
import { FormControl, FormLabel } from "@chakra-ui/react";
import { CreatableSelect } from "chakra-react-select";

const Example = () => {
  const [place, setPlace] = useState();

  return (
    <FormControl id="place" isRequired variant="floating" mb={8}>
      <CreatableSelect
        name="place"
        classNamePrefix="chakra-react-select"
        // ^ THIS IS REQUIRED, but it can be whatever you want.
        // Just make sure its consistent with your custom selector and across
        // all select components that you want to have a floating label
        options={locality}
        value={place}
        tabSelectsValues
        onChange={setPlace}
        openMenuOnFocus
        placeholder=" "
        chakraStyles={{
          menu: (provided) => ({
            ...provided,
            zIndex: 3
          })
        }}
      />
      <FormLabel>Place</FormLabel>
    </FormControl>
  );
};

I also added the chakraStyles modifier to change the zIndex of the Menu, otherwise the menu will go under any form labels that follow it.

Let me know if either of these solutions work for you or you have any questions! If not, don't forget to close the issue!

[ag288]

Both of the above solutions worked perfectly! I decided to follow the second as it fits in more with the way the other labels have been styled, as you said. Thank you so much for the prompt response and the effort <3

[rever96]

Hi, setting the zindex to 2 breaks some other components in that way:

How to fix this without change all defaults z-index?

[csandman]

Did you try a z-index of 3? That's what the example has for the menu