NumberInputs() — react Function Reference

Architecture documentation for the NumberInputs() function in index.js from the react codebase.

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ NumberInputs() — react Function Reference

Dependency Diagram

graph TD
  7046826b_54af_e773_52bb_abecd14760a0["NumberInputs()"]
  afbc8624_2e32_1a11_05f6_ca9cd5dde99a["index.js"]
  7046826b_54af_e773_52bb_abecd14760a0 -->|defined in| afbc8624_2e32_1a11_05f6_ca9cd5dde99a
  style 7046826b_54af_e773_52bb_abecd14760a0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/number-inputs/index.js lines 9–191

function NumberInputs() {
  return (
    <FixtureSet
      title="Number inputs"
      description="Number inputs inconsistently assign and report the value
                     property depending on the browser.">
      <TestCase
        title="Backspacing"
        description="The decimal place should not be lost">
        <TestCase.Steps>
          <li>Type "3.1"</li>
          <li>Press backspace, eliminating the "1"</li>
        </TestCase.Steps>

        <TestCase.ExpectedResult>
          The field should read "3.", preserving the decimal place
        </TestCase.ExpectedResult>

        <NumberTestCase />

        <p className="footnote">
          <b>Notes:</b> Modern Chrome and Safari {'<='} 6 clear trailing
          decimals on blur. React makes this concession so that the value
          attribute remains in sync with the value property.
        </p>
      </TestCase>

      <TestCase
        title="Decimal precision"
        description="Supports decimal precision greater than 2 places">
        <TestCase.Steps>
          <li>Type "0.01"</li>
        </TestCase.Steps>

        <TestCase.ExpectedResult>
          The field should read "0.01"
        </TestCase.ExpectedResult>

        <NumberTestCase />
      </TestCase>

      <TestCase
        title="Exponent form"
        description="Supports exponent form ('2e4')">
        <TestCase.Steps>
          <li>Type "2e"</li>
          <li>Type 4, to read "2e4"</li>
        </TestCase.Steps>

        <TestCase.ExpectedResult>
          The field should read "2e4". The parsed value should read "20000"
        </TestCase.ExpectedResult>

        <NumberTestCase />
      </TestCase>

      <TestCase title="Exponent Form" description="Pressing 'e' at the end">
        <TestCase.Steps>
          <li>Type "3.14"</li>
          <li>Press "e", so that the input reads "3.14e"</li>
        </TestCase.Steps>

        <TestCase.ExpectedResult>
          The field should read "3.14e", the parsed value should be empty
        </TestCase.ExpectedResult>

        <NumberTestCase />
      </TestCase>

      <TestCase
        title="Exponent Form"
        description="Supports pressing 'ee' in the middle of a number">
        <TestCase.Steps>
          <li>Type "3.14"</li>
          <li>Move the text cursor to after the decimal place</li>
          <li>Press "e" twice, so that the value reads "3.ee14"</li>
        </TestCase.Steps>

        <TestCase.ExpectedResult>
          The field should read "3.ee14"
        </TestCase.ExpectedResult>