In Select component: TypeError: setting getter-only property "target"
See original GitHub issueWhen using the Select
component and choosing an option, the error TypeError: setting getter-only property "target"
at Select.js:168
Expected Behavior
In the select dropdown I should be able to select an option.
Actual Behavior
An TypeError gets thrown.
URL, screen shot, or Codepen exhibiting the issue
import { FunctionalComponent, h } from "preact";
import { useState } from "preact/hooks";
import { Link } from "preact-router/match";
import styled from "styled-components";
import { Box, Button as GrommetButton, Select } from "grommet";
const H1 = styled.h1`
float: left;
margin: 0;
padding: 0 1rem;
font-size: 1.2rem;
line-height: 56px;
font-weight: 400;
color: var(--color-sdg-blue);
`;
const REGIONS = [
"Africa",
"Arab States",
"Asia and the Pacific",
"Europe and Central Asia",
"Latin America and the Carribbean"
];
const Header: FunctionalComponent = () => {
const [regionSearchValue, setRegionSearchValue] = useState<string>("");
const [regionOptions, setRegionOptions] = useState<string[]>(REGIONS);
return (
<div>
<Box direction="row" className="logo" align="center">
<img width={100} src="assets/logos/logo_elkano.png" alt="" />
<H1>Data Portal</H1>
</Box>
<Box direction="row" as="nav" align="center" gap="small">
<Select
plain
value={regionSearchValue}
onChange={(event): void => {
console.log("event", event);
// console.log("event", event.value);
setRegionSearchValue(event.value);
}}
placeholder="Region"
options={regionOptions}
/>
<GrommetButton color="primary" label="Login" />
</Box>
</div>
);
};
export default Header;
Steps to Reproduce
Your Environment
- TypeScript version: 4.1.2
- Grommet version: from package.json: “^2.16.2”
- Browser Name and version: Firefox 85.0
- Operating System and version (desktop or mobile): Linux Mint 20 Cinnamon 4.6.7
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:6 (4 by maintainers)
Top Results From Across the Web
TypeError: setting getter-only property "x" - JavaScript | MDN
There is an attempt to set a new value to a property for which only a getter is specified. While this will be...
Read more >TypeError: setting getter-only property "x"
There is an attempt to set a new value to a property for which only a getter is specified. While this will be...
Read more >TypeError: setting getter-only property "x" - JavaScript
There is an attempt to set a new value to a property for which only a getter is specified. While this will be...
Read more >TypeError: Cannot set Property which has only a Getter in JS
The "Cannot set property which has only a getter" error occurs when trying to set a new value to a property, for which...
Read more >Cannot set property target of #<Event> which has only a getter ...
I'm using the antd input component with ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@joaoGabriel55 Definitely! Go for it
Hello @simonv3 , thanks for reporting. As @jcfilben suggested, please find a reliable reproducible code so we can troubleshoot the problem. Feel free o reopen the issue if you find it still relevant.