You've already forked focalboard
mirror of
https://github.com/mattermost/focalboard.git
synced 2025-10-31 00:17:42 +02:00
Render react-select elements only on demand (#607)
* Render react-select elements only on demand * Reverting unneded change * Updating snapshots * Fixing css inconsistencies * Fix another tiny bug on mutil-select readonly view * Updating snapshots
This commit is contained in:
Jesús Espino
GitHub
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react'
|
||||
import React, {useState} from 'react'
|
||||
|
||||
import {IPropertyOption, IPropertyTemplate} from '../../blocks/board'
|
||||
|
||||
@@ -23,16 +23,18 @@ type Props = {
|
||||
|
||||
const MultiSelectProperty = (props: Props): JSX.Element => {
|
||||
const {propertyTemplate, emptyValue, propertyValue, isEditable, onChange, onChangeColor, onDeleteOption, onCreate, onDeleteValue} = props
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const values = Array.isArray(propertyValue) ?
|
||||
propertyValue.map((v) => propertyTemplate.options.find((o) => o!.id === v)).filter((v): v is IPropertyOption => Boolean(v)) :
|
||||
[]
|
||||
|
||||
if (!isEditable) {
|
||||
if (!isEditable || !open) {
|
||||
return (
|
||||
<div
|
||||
className='octo-property-value'
|
||||
className='octo-propertyvalue'
|
||||
tabIndex={0}
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
{values.map((v) => (
|
||||
<Label
|
||||
|
||||
@@ -38,6 +38,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
|
||||
const propertyValue = card.properties[propertyTemplate.id]
|
||||
const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate, intl)
|
||||
const finalDisplayValue = displayValue || emptyDisplayValue
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const validateProp = (propType: string, val: string): boolean => {
|
||||
if (val === '') {
|
||||
@@ -97,11 +98,12 @@ const PropertyValueElement = (props:Props): JSX.Element => {
|
||||
propertyColorCssClassName = cardPropertyValue.color
|
||||
}
|
||||
|
||||
if (readOnly || !boardTree) {
|
||||
if (readOnly || !boardTree || !open) {
|
||||
return (
|
||||
<div
|
||||
className='octo-property-value'
|
||||
className='octo-propertyvalue'
|
||||
tabIndex={0}
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<Label color={displayValue ? propertyColorCssClassName : 'empty'}>{finalDisplayValue}</Label>
|
||||
</div>
|
||||
|
||||
@@ -144,100 +144,14 @@ exports[`components/table/Table should match snapshot 1`] = `
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div
|
||||
class="ValueSelector css-2b097c-container"
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-18140j1-Control"
|
||||
class="Label color1 "
|
||||
>
|
||||
<div
|
||||
class=" css-5conz1-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-14tjw7f-singleValue"
|
||||
>
|
||||
<span
|
||||
class="Label color1 Label-single-select"
|
||||
>
|
||||
<span
|
||||
class="Label-text"
|
||||
>
|
||||
value 1
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="css-1shkodo-Input"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-2-input"
|
||||
spellcheck="false"
|
||||
style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-tpaeio-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class=" css-43ykx9-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-19sxey8-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
value 1
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -245,82 +159,12 @@ exports[`components/table/Table should match snapshot 1`] = `
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div
|
||||
class="ValueSelector css-2b097c-container"
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
<span
|
||||
id="aria-selection"
|
||||
/>
|
||||
<span
|
||||
id="aria-context"
|
||||
>
|
||||
Select is focused ,type to refine list, press Down to open the menu,
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class=" css-18140j1-Control"
|
||||
>
|
||||
<div
|
||||
class=" css-5conz1-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-1wa3eu0-placeholder"
|
||||
/>
|
||||
<div
|
||||
class="css-1shkodo-Input"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-3-input"
|
||||
spellcheck="false"
|
||||
style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-43ykx9-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-hl9mox-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
class="Label empty "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -640,7 +484,7 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div
|
||||
class="octo-property-value"
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
@@ -655,7 +499,7 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div
|
||||
class="octo-property-value"
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
|
||||
@@ -130,100 +130,14 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div
|
||||
class="ValueSelector css-2b097c-container"
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-18140j1-Control"
|
||||
class="Label color1 "
|
||||
>
|
||||
<div
|
||||
class=" css-5conz1-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-14tjw7f-singleValue"
|
||||
>
|
||||
<span
|
||||
class="Label color1 Label-single-select"
|
||||
>
|
||||
<span
|
||||
class="Label-text"
|
||||
>
|
||||
value 1
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="css-1shkodo-Input"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-2-input"
|
||||
spellcheck="false"
|
||||
style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-tpaeio-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class=" css-43ykx9-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-19sxey8-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
value 1
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -231,82 +145,12 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div
|
||||
class="ValueSelector css-2b097c-container"
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
<span
|
||||
id="aria-selection"
|
||||
/>
|
||||
<span
|
||||
id="aria-context"
|
||||
>
|
||||
Select is focused ,type to refine list, press Down to open the menu,
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class=" css-18140j1-Control"
|
||||
>
|
||||
<div
|
||||
class=" css-5conz1-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-1wa3eu0-placeholder"
|
||||
/>
|
||||
<div
|
||||
class="css-1shkodo-Input"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-3-input"
|
||||
spellcheck="false"
|
||||
style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-43ykx9-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-hl9mox-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
class="Label empty "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -444,100 +288,14 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div
|
||||
class="ValueSelector css-2b097c-container"
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-18140j1-Control"
|
||||
class="Label color1 "
|
||||
>
|
||||
<div
|
||||
class=" css-5conz1-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-14tjw7f-singleValue"
|
||||
>
|
||||
<span
|
||||
class="Label color1 Label-single-select"
|
||||
>
|
||||
<span
|
||||
class="Label-text"
|
||||
>
|
||||
value 1
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="css-1shkodo-Input"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-4-input"
|
||||
spellcheck="false"
|
||||
style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-tpaeio-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class=" css-43ykx9-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-19sxey8-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
value 1
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -545,82 +303,12 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div
|
||||
class="ValueSelector css-2b097c-container"
|
||||
class="octo-propertyvalue"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
<span
|
||||
id="aria-selection"
|
||||
/>
|
||||
<span
|
||||
id="aria-context"
|
||||
>
|
||||
Select is focused ,type to refine list, press Down to open the menu,
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class=" css-18140j1-Control"
|
||||
>
|
||||
<div
|
||||
class=" css-5conz1-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-1wa3eu0-placeholder"
|
||||
/>
|
||||
<div
|
||||
class="css-1shkodo-Input"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-5-input"
|
||||
spellcheck="false"
|
||||
style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-43ykx9-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-hl9mox-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
class="Label empty "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -74,6 +74,9 @@
|
||||
flex-direction: row;
|
||||
color: rgb(var(--body-color));
|
||||
border-right: solid 1px rgba(var(--body-color), 0.09);
|
||||
border-left: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
min-height: 32px;
|
||||
@@ -132,6 +135,9 @@
|
||||
line-height: 17px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.Label {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.Editable,
|
||||
|
||||
@@ -164,7 +164,7 @@ function ValueSelector(props: Props): JSX.Element {
|
||||
closeMenuOnSelect={true}
|
||||
placeholder={props.emptyValue}
|
||||
hideSelectedOptions={false}
|
||||
defaultMenuIsOpen={false}
|
||||
defaultMenuIsOpen={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user