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.

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

NumberInput: increase,decrease buttons behave like submit in form #39069

Closed
2 tasks done
Herty94 opened this issue Sep 20, 2023 · 3 comments
Closed
2 tasks done

NumberInput: increase,decrease buttons behave like submit in form #39069

Herty94 opened this issue Sep 20, 2023 · 3 comments
Assignees
Labels
component: number field This is the name of the generic UI component, not the React module!

Comments

@Herty94
Copy link

Herty94 commented Sep 20, 2023

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

  1. NumberInput is placed in element
  2. click increase/decrease button

Current behavior 😯

it submits form

Expected behavior 🤔

it should not submit form

Context 🔦

I want to use NumberInfo in complex dialog with formvalidation , when i change number it the NumberInput submits form.
possible fix : explicitly define button type as "button"

Example

<div class="MuiNumberInput-root">
 <button type="button" class="MuiNumberInput-decrementButton" />
 <button type="button" class="MuiNumberInput-incrementButton" />
 <input class="MuiNumberInput-input" />
</div>

Your environment 🌎

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
``` System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 19.6.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.2283.0), Chromium (117.0.2045.31)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base: ^5.0.0-beta.15 => 5.0.0-beta.15
    @mui/core-downloads-tracker:  5.13.4
    @mui/icons-material: ^5.11.16 => 5.11.16
    @mui/material: ^5.13.5 => 5.13.5
    @mui/private-theming:  5.13.1
    @mui/styled-engine:  5.13.2
    @mui/system:  5.13.5
    @mui/types:  7.2.4
    @mui/utils:  5.14.9
    @mui/x-data-grid: ^6.8.0 => 6.8.0
    @mui/x-date-pickers: ^6.8.0 => 6.8.0
    @types/react: ^18.2.13 => 18.2.13
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.9.5 => 4.9.5

</details>
@Herty94 Herty94 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 20, 2023
@mnajdova mnajdova added the component: number field This is the name of the generic UI component, not the React module! label Sep 20, 2023
@Herty94
Copy link
Author

Herty94 commented Sep 20, 2023

sorry I had completely misunderstood Base UI functionality, i will close this issue

@Herty94 Herty94 closed this as completed Sep 20, 2023
@Herty94 Herty94 closed this as not planned Won't fix, can't repro, duplicate, stale Sep 20, 2023
@zannager zannager removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 20, 2023
@weboson
Copy link

weboson commented Jun 29, 2024

 <BaseNumberInput
      slots={{
        root: StyledInputRoot,
        input: StyledInput,
        incrementButton: StyledButton,
        decrementButton: StyledButton,
      }}
      slotProps={{
        incrementButton: {
          children: <FaPlus />, 
          className: 'increment',
          type: 'button', //! <----------------------------------
        },
        decrementButton: {
          children: <FaMinus />, 
          className: 'decrement',
          type: 'button', //! <----------------------------------
        },
      }}
      {...props}
      ref={ref}
    />

@nabilAparicio
Copy link

StyledButton.defaultProps = {
type: 'button',
};

this one work for me :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: number field This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

6 participants