Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui][FormControl] Label position error #42151

Open
sawa-ko opened this issue May 6, 2024 · 0 comments
Open

[material-ui][FormControl] Label position error #42151

sawa-ko opened this issue May 6, 2024 · 0 comments
Assignees
@mj12albert
Labels
component: FormControl The React component component: input This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@sawa-ko
Copy link

sawa-ko commented May 6, 2024 •
edited

Steps to reproduce

Link to live example: https://codesandbox.io/p/github/sawa-ko/nextjs-app-router-mui-bug/draft/stoic-lewin

Steps:

  1. Use nextjs v14.2.3
  2. Using the FormControl component
  3. Inside use the InputLabel and OutlinedInput component.
<FormControl variant="outlined">
    <InputLabel htmlFor={'username'}>{t('form.fields.username.label')}</InputLabel>
    <OutlinedInput fullWidth={true} id={'username'} />
    <FormHelperText>{t('form.fields.username.helper')}</FormHelperText>
</FormControl>
import { ReactNode } from 'react';

import { cookies } from 'next/headers';

import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { getLocale, getMessages, getTranslations } from 'next-intl/server';
import { isRtlLang } from 'rtl-detect';

import type { Metadata } from 'next';

import Providers from '@/components/shared/client/providers';

import './globals.css';

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations('common.metadata');

  return {
    applicationName: t('title'),
    description: t('description'),
    title: {
      default: t('title'),
      template: `%s - ${t('title')}`,
    },
  };
}

export default async function RootLayout({ children }: { children: ReactNode }) {
  const locale = await getLocale();
  const messages = await getMessages({ locale });
  const cookieStore = cookies();
  const schemaMode = cookieStore.get('mui-mode');

  return (
    <html data-mui-color-scheme={schemaMode?.value} dir={isRtlLang(locale) ? 'rtl' : 'ltr'} lang={locale}>
      <body>
        <AppRouterCacheProvider>
          <Providers i18n={{ locale, messages }}>{children}</Providers>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}
'use client';

import { ReactNode } from 'react';

import { Roboto } from 'next/font/google';

import CssBaseline from '@mui/material/CssBaseline';
import { Experimental_CssVarsProvider as ThemeProvider, experimental_extendTheme as createTheme } from '@mui/material/styles';
import { AbstractIntlMessages, NextIntlClientProvider } from 'next-intl';

import { LOCALE_TIMEZONE } from '@/lib/i18n/config';

interface ProvidersProps {
  children: ReactNode;
  i18n: {
    locale: string;
    messages: AbstractIntlMessages;
  };
}

const roboto = Roboto({
  display: 'swap',
  subsets: ['latin'],
  weight: ['300', '400', '500', '700'],
});

export const theme = createTheme({
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
  unstable_strictMode: true,
});

export default function Providers({ children, i18n }: ProvidersProps) {
  return (
    <NextIntlClientProvider locale={i18n.locale} messages={i18n.messages} timeZone={LOCALE_TIMEZONE}>
      <ThemeProvider theme={theme}>
        <CssBaseline enableColorScheme={true} />
        {children}
      </ThemeProvider>
    </NextIntlClientProvider>
  );
}

Current behavior

The input label looks wrong because the divider line is above the input label.

image

Expected behavior

Correct positioning of the label in the input.

Context

Create a form with inputs.

Your environment

npx @mui/envinfo 
  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.6 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (124.0.2478.51)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/icons-material: ^5.15.16 => 5.15.16 
    @mui/material: ^5.15.16 => 5.15.16
    @mui/material-nextjs: ^5.15.11 => 5.15.11
    @types/react: 18.3.1 => 18.3.1
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    typescript: 5.4.5 => 5.4.5

Search keywords: FormControl, InputLabel, OutlinedInput, FormHelperText, Forms
@sawa-ko sawa-ko added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 6, 2024
@danilo-leal danilo-leal changed the title Input label position error [material-ui][FormControl] Label position error May 7, 2024
@danilo-leal danilo-leal added package: material-ui Specific to @mui/material component: FormControl The React component component: input This is the name of the generic UI component, not the React module! labels May 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mj12albert mj12albert

Labels
component: FormControl The React component component: input This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mj12albert @sawa-ko @danilo-leal