Floating Label

[rever96]

Subject

Floating Label

Description

I've found out that in this recipe: https://chakra-ui.com/community/recipes/floating-labels.

There is zIndex: 2 but I think zIndex: 1 is enought and it conflict with less components (i.e. https://www.npmjs.com/package/react-datepicker).

---

my setup to makes datepicker works with floating:

Form theme string label = 'input:not(:placeholder-shown) + label, .chakra-react-select--has-value + label, .chakra-datepicker--has-value + label, .chakra-select__wrapper + label, textarea:not(:placeholder-shown) ~ label':

DatePicker Component =

<DatePicker
              id="birthDate"
              name="birthDate"
              selected={formik.values.birthDate}
              onChange={(value) => formik.setFieldValue('birthDate', value)}
              wrapperClassName={`chakra-datepicker${
                formik.values.birthDate !== undefined ? '--has-value' : ''
              }`}
/>

---

and... I wonder if there is a way to make it works without conflict at all with other elements (i'm having trouble with https://www.npmjs.com/package/react-select)

[rever96]

for react select I solved using this:

import React from 'react';
import { GroupBase, OptionsOrGroups, Select } from 'chakra-react-select';
import { FormikProps } from 'formik';

type Props = {
  options: OptionsOrGroups<
    { value: any; label: string },
    GroupBase<{ value: any; label: string }>
  >;
  name: string;
  formik: FormikProps<any>;
  value: any;
};

const Component = ({ options, name, formik, value }: Props) => {
  return (
    <Select
      classNamePrefix="chakra-react-select"
      chakraStyles={{
        menu: (provided, state) => ({
          ...provided,
          zIndex: 3,
        }),
      }}
      placeholder=""
      id={name}
      name={name}
      onChange={(option) => formik.setFieldValue(name, option?.value)}
      onBlur={formik.handleBlur}
      options={options}
      value={value}
    />
  );
};

export default Component;