diff --git a/assets/media/styles.css b/assets/media/styles.css index ec9f85d4..8f4fa3cf 100644 --- a/assets/media/styles.css +++ b/assets/media/styles.css @@ -166,6 +166,10 @@ border: 1px solid var(--vscode-inputValidation-infoBorder); } +.article__tags__input input:disabled { + border-color: transparent; +} + .article__tags__input.freeform { position: relative; } diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx index 9232eeee..9a75380d 100644 --- a/src/panelWebView/components/TagPicker.tsx +++ b/src/panelWebView/components/TagPicker.tsx @@ -8,7 +8,7 @@ import { AddIcon } from './Icons/AddIcon'; import { VsLabel } from './VscodeComponents'; import { MessageHelper } from '../../helpers/MessageHelper'; import { BlockFieldData, CustomTaxonomyData } from '../../models'; -import { useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; export interface ITagPickerProps { type: TagType; @@ -157,6 +157,14 @@ const TagPicker: React.FunctionComponent = (props: React.PropsW return selected.length >= limit; }, [limit, selected]); + const inputPlaceholder = useMemo((): string => { + if (checkIsDisabled()) { + return `You have reached the limit of ${limit} ${label || type.toLowerCase()}`; + } + + return `Pick your ${label || type.toLowerCase()}`; + }, [label, type, checkIsDisabled]); + React.useEffect(() => { setTimeout(() => { triggerFocus(); @@ -173,7 +181,7 @@ const TagPicker: React.FunctionComponent = (props: React.PropsW
- {icon} {label || type} + {icon} {label || type}{(limit !== undefined && limit > 0) ? <>{` `}(Max.: {limit}) : ``}
@@ -201,7 +209,7 @@ const TagPicker: React.FunctionComponent = (props: React.PropsW disabled: checkIsDisabled() }) } - placeholder={`Pick your ${label || type.toLowerCase()}`} /> + placeholder={inputPlaceholder} /> { freeform && (