forked from JedWatson/react-select
/
DummyInput.tsx
51 lines (47 loc) · 1.16 KB
/
DummyInput.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/** @jsx jsx */
import { Ref } from 'react';
import { jsx } from '@emotion/react';
import { removeProps } from '../utils';
export default function DummyInput({
innerRef,
...props
}: JSX.IntrinsicElements['input'] & {
readonly innerRef: Ref<HTMLInputElement>;
}) {
// Remove animation props not meant for HTML elements
const filteredProps = removeProps(
props,
'onExited',
'in',
'enter',
'exit',
'appear'
);
return (
<input
ref={innerRef}
{...filteredProps}
css={{
label: 'dummyInput',
// get rid of any default styles
background: 0,
border: 0,
// important! this hides the flashing cursor
caretColor: 'transparent',
fontSize: 'inherit',
gridArea: '1 / 1 / 2 / 3',
outline: 0,
padding: 0,
// important! without `width` browsers won't allow focus
width: 1,
// remove cursor on desktop
color: 'transparent',
// remove cursor on mobile whilst maintaining "scroll into view" behaviour
left: -100,
opacity: 0,
position: 'relative',
transform: 'scale(.01)',
}}
/>
);
}