diff --git a/frontend/web/components/PageTitle.tsx b/frontend/web/components/PageTitle.tsx index c35841c1b4aa..223b9bb1a000 100644 --- a/frontend/web/components/PageTitle.tsx +++ b/frontend/web/components/PageTitle.tsx @@ -20,7 +20,7 @@ const PageTitle: FC = ({ children, className, cta, title }) => { )} - {!!cta &&
{cta}
} + {!!cta &&
{cta}
}
diff --git a/frontend/web/components/experiments/EventNameSelect/EventNameSelect.tsx b/frontend/web/components/experiments/EventNameSelect/EventNameSelect.tsx index 5e960bf5c0be..880e75f0dbfb 100644 --- a/frontend/web/components/experiments/EventNameSelect/EventNameSelect.tsx +++ b/frontend/web/components/experiments/EventNameSelect/EventNameSelect.tsx @@ -1,5 +1,6 @@ -import { FC, useMemo } from 'react' +import { FC, useMemo, useState } from 'react' import CreatableSelect from 'react-select/creatable' +import { InputActionMeta } from 'react-select' import { useGetWarehouseConnectionEventsQuery, useGetWarehouseConnectionsQuery, @@ -33,6 +34,22 @@ const EventNameSelect: FC = ({ onChange, value }) => { ) const options = useMemo(() => buildEventOptions(data?.events), [data?.events]) const showWarning = isSuccess && isUnknownEvent(value, data?.events) + const [inputValue, setInputValue] = useState('') + + // Keep the typed text on blur (react-select discards it by default) so + // clicking outside commits the value instead of clearing it. + const handleInputChange = (val: string, meta: InputActionMeta) => { + if (meta.action === 'input-change') setInputValue(val) + } + const handleChange = (option: EventOption | null) => { + setInputValue('') + onChange(option?.value ?? '') + } + const handleBlur = () => { + if (!inputValue) return + onChange(inputValue) + setInputValue('') + } return (
@@ -42,11 +59,14 @@ const EventNameSelect: FC = ({ onChange, value }) => { classNamePrefix='react-select' isClearable isLoading={isLoading} + inputValue={inputValue} + onInputChange={handleInputChange} + onBlur={handleBlur} maxMenuHeight={200} menuPlacement='auto' options={options} value={value ? { label: value, value } : null} - onChange={(option: EventOption | null) => onChange(option?.value ?? '')} + onChange={handleChange} placeholder='e.g. checkout_completed' formatCreateLabel={(input: string) => `Use "${input}"`} noOptionsMessage={() => 'Type to add a new event'} diff --git a/frontend/web/components/experiments/results/ExperimentSummaryScorecard.tsx b/frontend/web/components/experiments/results/ExperimentSummaryScorecard.tsx index 537bdaa31d13..14a2de6aa55b 100644 --- a/frontend/web/components/experiments/results/ExperimentSummaryScorecard.tsx +++ b/frontend/web/components/experiments/results/ExperimentSummaryScorecard.tsx @@ -51,16 +51,12 @@ const ExperimentSummaryScorecard: FC = ({ loading={!hasResults} value={ summary?.winnerName ? ( - - - + ) : undefined } /> diff --git a/frontend/web/components/experiments/steps/SetupStep.tsx b/frontend/web/components/experiments/steps/SetupStep.tsx index 11b89e96b3f4..edfaf0c95ff9 100644 --- a/frontend/web/components/experiments/steps/SetupStep.tsx +++ b/frontend/web/components/experiments/steps/SetupStep.tsx @@ -45,7 +45,7 @@ const SetupStep: FC = ({ search: search || undefined, type: 'MULTIVARIATE', }, - { skip: !numericEnvId }, + { refetchOnMountOrArgChange: true, skip: !numericEnvId }, ) const multivariateFeatures = featureList?.results ?? []