Merge branch 'dev' of github.com:mantinedev/mantine

milhamm · Mar 14, 2023 · 8581b29 · 8581b29
2 parents 536c40b + 92e3025
commit 8581b29
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 9 deletions.
diff --git a/src/mantine-core/src/PinInput/PinInput.story.tsx b/src/mantine-core/src/PinInput/PinInput.story.tsx
@@ -12,6 +12,16 @@ export function Usage() {
   );
 }
 
+export function OnComplete() {
+  const [value, setValue] = useState('');
+  return (
+    <div style={{ padding: 40 }}>
+      <PinInput length={5} onComplete={setValue} />
+      Pin: {value}
+    </div>
+  );
+}
+
 export function ReadOnly() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/src/mantine-core/src/PinInput/PinInput.test.tsx b/src/mantine-core/src/PinInput/PinInput.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { checkAccessibility, itSupportsSystemProps } from '@mantine/tests';
 import { PinInput, PinInputProps } from './PinInput';
 
@@ -19,4 +19,19 @@ describe('@mantine/core/PinInput', () => {
     const { container } = render(<PinInput {...defaultProps} length={5} />);
     expect(container.querySelectorAll('.mantine-PinInput-input')).toHaveLength(5);
   });
+
+  it('onComplete is called on last input', () => {
+    const log = jest.spyOn(global.console, 'log');
+    const { container } = render(
+      <PinInput {...defaultProps} onComplete={(value) => console.log(value)} />
+    );
+
+    expect(container.querySelectorAll('.mantine-PinInput-input')).toHaveLength(4);
+
+    container.querySelectorAll('.mantine-PinInput-input').forEach((element) => {
+      fireEvent.change(element, { target: { value: '1' } });
+    });
+
+    expect(log).toHaveBeenCalledWith('1111');
+  });
 });
diff --git a/src/mantine-core/src/PinInput/PinInput.tsx b/src/mantine-core/src/PinInput/PinInput.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import { useUncontrolled, useId } from '@mantine/hooks';
 import {
   DefaultProps,
@@ -197,13 +197,7 @@ export const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) =
 
     if (isValid) {
       setFieldValue(nextChar, index);
-      const isComplete = _value.length === length;
-
-      if (isComplete) {
-        onComplete?.(_value);
-      } else {
-        focusInputField('next', index);
-      }
+      focusInputField('next', index);
     } else {
       setFieldValue('', index);
     }
@@ -238,6 +232,12 @@ export const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) =
     }
   };
 
+  useEffect(() => {
+    if (_value.length !== length) return;
+
+    onComplete?.(_value);
+  }, [_value]);
+
   return (
     <>
       <Group

diff --git a/src/mantine-core/src/Popover/Popover.story.tsx b/src/mantine-core/src/Popover/Popover.story.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Box } from '../Box';
 import { Popover } from './Popover';
 import { Button } from '../Button';
 import { MultiSelect } from '../MultiSelect';
@@ -197,3 +198,51 @@ export function Inline() {
     </div>
   );
 }
+
+export function PopoverEvents() {
+  const [opened, setState] = useState(false);
+  const [toggle1, setToggle1] = useState(false);
+  const [toggle2, setToggle2] = useState(false);
+
+  return (
+    <div style={{ padding: 100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Group>
+        <Popover
+          opened={opened}
+          onChange={setState}
+          onOpen={() => setToggle1(true)}
+          onClose={() => setToggle1(false)}
+          middlewares={{ shift: false, flip: false }}
+          position="bottom"
+          withArrow
+          trapFocus
+          radius="md"
+          returnFocus
+        >
+          <Popover.Target>
+            <Box>
+              <Button onClick={() => setState((c) => !c)}>Toggle controlled popover</Button>
+              <br />
+              <div>Controlled State: {toggle1 ? 'Open' : 'Closed'}</div>
+            </Box>
+          </Popover.Target>
+
+          <Popover.Dropdown>
+            <Button onClick={() => setState(false)}>Close</Button>
+          </Popover.Dropdown>
+        </Popover>
+        <Popover onOpen={() => setToggle2(true)} onClose={() => setToggle2(false)}>
+          <Popover.Target>
+            <Box>
+              <Button>Toggle uncontrolled popover</Button>
+              <br />
+              <div>Uncontrolled State: {toggle2 ? 'Open' : 'Closed'}</div>
+            </Box>
+          </Popover.Target>
+
+          <Popover.Dropdown>Dropdown</Popover.Dropdown>
+        </Popover>
+      </Group>
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/Popover/use-popover.ts b/src/mantine-core/src/Popover/use-popover.ts
@@ -101,6 +101,14 @@ export function usePopover(options: UsePopoverOptions) {
     options.onPositionChange?.(floating.placement);
   }, [floating.placement]);
 
+  useDidUpdate(() => {
+    if (!options.opened) {
+      options.onClose?.();
+    } else {
+      options.onOpen?.();
+    }
+  }, [options.opened]);
+
   return {
     floating,
     controlled: typeof options.opened === 'boolean',