Skip to content

Select not working as intended.  #5

Description

@lively-ops

I was creating a year selector using @synerise/ds-select or Select. However, I encountered a few issues:

  1. No hover effect on items (Options)
  2. Items are not clickable.
  3. When clicking somewhere else, dropdown is not closing automatically.

Note: I am able to select items using arrow keys on keyboard with return key pressed.

here's the code:

`
import * as React from "react";
import Icon from "@synerise/ds-icon";
import {AngleDownS, SearchM} from "@synerise/ds-icon/dist/icons";
import theme from "@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme";
import Button from "@synerise/ds-button";
import Select from "@synerise/ds-select";
import {data} from "./mock";

const {Option} = Select;

export const YearSelector = (props) => {
const [selected, setSelected] = React.useState('2077-2078')

const handleClear = () => {
   setSelected(null);
   alert('Default Year will be loaded.');
   setDefault();
}

const handleChange = item => {

   setSelected(item)
}

const setDefault = () => {
setSelected('2077-2078')

}

return(
    <div style={{width: 200}}>
        <Select

            autoFocus={true}
            showSearch={true}
            label={'Year'}
            tooltip={'Select Year'}
            value={selected}
            filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
            onChange={(item) => handleChange(item)}
            children={data.map(item => {
                return (
                    <Option value={item}>{item}</Option>
                )
            })}
            >

        </Select>
    </div>
)

}
`

mock.js ---> export const data = ['2076-2077', '2077-2078', '2078-2079'];

I have also attached a video as reference. I would appreciate the help if this isn't an issue with the component ds-select.

ds-select.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions