9de42ca4-8c55-4031-8310-e7e0a2b0128b

Committed 26 Oct 2024 11:27AM CUT coverage: 75.844%. Remained the same

Build # 9de42ca4-8c55-4031-8310-e7e0a2b0128b

Build Type

Pull #5880

circleci

Committed by

lukebennett88

Commit Message

add box-sizing to border-box for RequiredInput

adding `required` would otherwise cause an extra (unstylable) component to be added which has some implicit padding from the user agent style sheet (inputs have padding) which could cause horizontal scrolling when the whole scroll field is 100% wide.

Pull Request Pull Request #5880: add box-sizing to border-box for RequiredInput

Run Details

658 of 1052 branches covered (62.55%)

1033 of 1362 relevant lines covered (75.84%)

1934.69 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

77.78

/packages/react-select/src/internal/ScrollManager.tsx

/** @jsx jsx */
import { jsx } from '@emotion/react';
import { Fragment, ReactElement, RefCallback, MouseEvent } from 'react';
import useScrollCapture from './useScrollCapture';
import useScrollLock from './useScrollLock';

interface Props {
  readonly children: (ref: RefCallback<HTMLElement>) => ReactElement;
  readonly lockEnabled: boolean;
  readonly captureEnabled: boolean;
  readonly onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
  readonly onBottomLeave?: (event: WheelEvent | TouchEvent) => void;
  readonly onTopArrive?: (event: WheelEvent | TouchEvent) => void;
  readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
}

const blurSelectInput = (event: MouseEvent<HTMLDivElement>) => {
  const element = event.target as HTMLDivElement;
  return (
    element.ownerDocument.activeElement &&
    (element.ownerDocument.activeElement as HTMLElement).blur()
  );
};

export default function ScrollManager({
  children,
  lockEnabled,
  captureEnabled = true,
  onBottomArrive,
  onBottomLeave,
  onTopArrive,
  onTopLeave,
}: Props) {
  const setScrollCaptureTarget = useScrollCapture({
    isEnabled: captureEnabled,
    onBottomArrive,
    onBottomLeave,
    onTopArrive,
    onTopLeave,
  });
  const setScrollLockTarget = useScrollLock({ isEnabled: lockEnabled });

  const targetRef: RefCallback<HTMLElement> = (element) => {
    setScrollCaptureTarget(element);
    setScrollLockTarget(element);
  };

  return (
    <Fragment>
      {lockEnabled && (
        <div
          onClick={blurSelectInput}
          css={{ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 }}
        />
      )}
      {children(targetRef)}
    </Fragment>
  );
}

1	/** @jsx jsx */
2	import { jsx } from '@emotion/react';
3	import { Fragment, ReactElement, RefCallback, MouseEvent } from 'react';
4	import useScrollCapture from './useScrollCapture';
5	import useScrollLock from './useScrollLock';
6
7	interface Props {
8	readonly children: (ref: RefCallback<HTMLElement>) => ReactElement;
9	readonly lockEnabled: boolean;
10	readonly captureEnabled: boolean;
11	readonly onBottomArrive?: (event: WheelEvent \| TouchEvent) => void;
12	readonly onBottomLeave?: (event: WheelEvent \| TouchEvent) => void;
13	readonly onTopArrive?: (event: WheelEvent \| TouchEvent) => void;
14	readonly onTopLeave?: (event: WheelEvent \| TouchEvent) => void;
15	}
16
17	const blurSelectInput = (event: MouseEvent<HTMLDivElement>) => {	5✔
18	const element = event.target as HTMLDivElement;	×
19	return (	×
20	element.ownerDocument.activeElement &&	×
21	(element.ownerDocument.activeElement as HTMLElement).blur()
22	);
23	};
24
25	export default function ScrollManager({
26	children,
27	lockEnabled,
28	captureEnabled = true,	×
29	onBottomArrive,
30	onBottomLeave,
31	onTopArrive,
32	onTopLeave,
33	}: Props) {
34	const setScrollCaptureTarget = useScrollCapture({	768✔
35	isEnabled: captureEnabled,
36	onBottomArrive,
37	onBottomLeave,
38	onTopArrive,
39	onTopLeave,
40	});
41	const setScrollLockTarget = useScrollLock({ isEnabled: lockEnabled });	768✔
42
43	const targetRef: RefCallback<HTMLElement> = (element) => {	768✔
44	setScrollCaptureTarget(element);	1,536✔
45	setScrollLockTarget(element);	1,536✔
46	};
47
48	return (	768✔
49	<Fragment>
50	{lockEnabled && (	768!
51	<div
52	onClick={blurSelectInput}
53	css={{ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 }}
54	/>
55	)}
56	{children(targetRef)}
57	</Fragment>
58	);
59	}

JedWatson / react-select / 9de42ca4-8c55-4031-8310-e7e0a2b0128b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous