Button placement next to Input field with Mantine React

August 31, 2023

I am trying to place a button next to an input field in react using the Mantine library. My input field looks like this (with styling):

const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
  control: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: `${theme.spacing.xs} ${theme.spacing.md}`,
    borderRadius: theme.radius.md,
    border: `${rem(1)} solid ${
      theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]
    }`,
    transition: "background-color 150ms ease",
  },

  label: {
    fontWeight: 500,
    fontSize: theme.fontSizes.sm,
  },

  icon: {
    transition: "transform 150ms ease",
    transform: opened ? "rotate(180deg)" : "rotate(0deg)",
  },
}));

And the component itself is given as:

//general input field, takes any string
export const ApprovalStatus: React.FC<GenericInputFormProps> = ({
  label,
  placeholder,
  index,
}) => {
  ... # retrieving data etc.
  return (
    <>
      <Autocomplete
            // dropdownComponent={}
            maxDropdownHeight="280px"
            label={label}
            limit={20}
            placeholder={placeholder}
            className={classes.control}
            value={value}
            onChange={setValue}
            data={flatData}
          />
    </>
  );
};

This creates the following component:

Example of created input field

Now, I would like to add a small button right of the description to explain more in depth what the input field expects.

I tried to do that using the Popover function from Mantine:

 return (
    <>
      <Popover width={200} position="top" withArrow shadow="md">
        <Popover.Target>
          <ActionIcon variant="filled">
            <IconQuestionMark size="1.125rem"/>
          </ActionIcon>
        </Popover.Target>
        <Popover.Dropdown>
          <Text size="sm">
            Test popover
          </Text>
        </Popover.Dropdown>
      </Popover>
      <Autocomplete
            // dropdownComponent={}
            maxDropdownHeight="280px"
            label={label}
            limit={20}
            placeholder={placeholder}
            className={classes.control}
            value={value}
            onChange={setValue}
            data={flatData}
          />
    </>
  );
};

The result, however, is as follows:

Button added

As you can see the button comes, logically so, above the input field. Does anyone have any idea how I can style the button such that it appears left of the input field, within the borders? Any help is appreciated. Everything is done in React using the Mantine library

>Solution :

You could make use of the styles or classNames attribute from <Autocomplete /> to modify your design as per your liking.

import {
  Autocomplete,
  ActionIcon,
} from '@mantine/core';

<Autocomplete
  data={['React', 'Angular', 'Svelte', 'Vue']}
  rightSection={<ActionIcon onClick={console.log}>A</ActionIcon>}
/>