- return <Form.Select
- isInvalid={isInvalid}
- name={name}
- onBlur={onBlur}
- onChange={onChange}
- type="search"
- value={value}
- >
- <option value="">{i18n.t('tournaments.discordNoCategory')}</option>
- {results && results.length ? results.map(result =>
- <option key={result.id} value={result.channel_id}>{result.name}</option>
- ) : null}
- </Form.Select>;
+ if (value) {
+ return <div className="d-flex align-items-center justify-content-between">
+ <span>{resolved ? <ChannelBox channel={resolved} /> : value}</span>
+ <Button
+ className="ms-2"
+ onClick={() => onChange({ guild: null, target: { name, value: '' }})}
+ title={t('button.unset')}
+ variant="outline-danger"
+ >
+ <Icon.REMOVE title="" />
+ </Button>
+ </div>;
+ }
+ return <div className={`discord-select ${showResults ? 'expanded' : 'collapsed'}`} ref={ref}>
+ <Form.Control
+ className="search-input"
+ name={Math.random().toString(20).substr(2, 10)}
+ onChange={e => setSearch(e.target.value)}
+ onFocus={() => setShowResults(true)}
+ type="search"
+ value={search}
+ />
+ <div className="search-results-holder">
+ {results.length ?
+ <ListGroup className="search-results">
+ {results.map(result =>
+ <ListGroup.Item
+ action
+ key={result.id}
+ onClick={() => onChange({
+ channel: result,
+ target: { name, value: result.channel_id },
+ })}
+ >
+ <ChannelBox channel={result} />
+ </ListGroup.Item>
+ )}
+ </ListGroup>
+ :
+ <Alert className="search-results" variant="info">
+ {t('search.noResults')}
+ </Alert>
+ }
+ </div>
+ </div>;