diff --git a/src/Css.ts b/src/Css.ts index 593973d1e..2cb8d73ba 100644 --- a/src/Css.ts +++ b/src/Css.ts @@ -3966,12 +3966,15 @@ class CssBuilder { } // visuallyHidden - /** Sets `position: "absolute"; overflow: "hidden"; clip: "inset(50%)"; clipPath: ""; border: 0; height: "1px"; margin: "-1px"; width: "1px"; padding: 0; whiteSpace: "nowrap"`. */ + /** Sets `position: "absolute"; overflow: "hidden"; clip: "inset(50%)"; clipPath: ""; border: 0; height: "1px"; margin: "-1px"; width: "1px"; padding: 0; whiteSpace: "nowrap"; opacity: 0`. */ get visuallyHidden() { return this.add("position", "absolute").add("overflow", "hidden").add("clip", "inset(50%)").add("clipPath", "").add( "border", 0, - ).add("height", "1px").add("margin", "-1px").add("width", "1px").add("padding", 0).add("whiteSpace", "nowrap"); + ).add("height", "1px").add("margin", "-1px").add("width", "1px").add("padding", 0).add("whiteSpace", "nowrap").add( + "opacity", + 0, + ); } // contentEmpty diff --git a/src/components/Chips.tsx b/src/components/Chips.tsx index 12db5e48a..920857071 100644 --- a/src/components/Chips.tsx +++ b/src/components/Chips.tsx @@ -13,12 +13,13 @@ export interface ChipsProps { values: string[] | ChipValue[]; xss?: X; compact?: boolean; + wrap?: boolean; } /** Renders a list of `Chip`s, with wrapping & appropriate margin between each `Chip`. */ export function Chips>(props: ChipsProps) { - const { wrap } = usePresentationContext(); - const { values, compact, xss = {} } = props; + const { wrap: presentationWrap } = usePresentationContext(); + const { values, compact, xss = {}, wrap = presentationWrap } = props; return (
>(props: TextFieldB container: Css.df.fdc.w100.maxw(fieldMaxWidth).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$, inputWrapper: { ...Css[typeScale].df.aic.br4.px1.w100 - .hPx(fieldHeight - maybeSmaller) - .if(compact) - .hPx(compactFieldHeight - maybeSmaller).$, - ...Css.bgColor(bgColor) + .bgColor(bgColor) .gray900.if(contrast) .white.if(labelStyle === "left").w50.$, // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented. @@ -141,6 +138,15 @@ export function TextFieldBase>(props: TextFieldB : Css.bGray300.if(contrast).bGray700.$), // Do not add borders to compound fields. A compound field is responsible for drawing its own borders ...(!compound ? Css.ba.$ : {}), + // When multiline is true, then we want to allow the field to grow to the height of the content, but not shrink below the minHeight + // Otherwise, set fixed heights values accordingly. + ...(multiline + ? Css.mhPx(fieldHeight - maybeSmaller) + .if(compact) + .mhPx(compactFieldHeight - maybeSmaller).$ + : Css.hPx(fieldHeight - maybeSmaller) + .if(compact) + .hPx(compactFieldHeight - maybeSmaller).$), }, inputWrapperReadOnly: { ...Css[typeScale].df.aic.w100.gray900.if(contrast).white.if(labelStyle === "left").w50.$, @@ -255,9 +261,15 @@ export function TextFieldBase>(props: TextFieldB {startAdornment && {startAdornment}} {unfocusedPlaceholder && (
diff --git a/src/inputs/hooks/useGrowingTextField.tsx b/src/inputs/hooks/useGrowingTextField.tsx index 823716102..b933dc700 100644 --- a/src/inputs/hooks/useGrowingTextField.tsx +++ b/src/inputs/hooks/useGrowingTextField.tsx @@ -27,7 +27,13 @@ export function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }: }, [inputRef, disabled, inputWrapRef]); useLayoutEffect(() => { - if (disabled) return; + if (disabled) { + // reset the height property if it was flipped to disabled + if (inputWrapRef.current) { + inputWrapRef.current.style.removeProperty("height"); + } + return; + } if (inputRef.current) { // Temp hack until we can figure out a better way to ensure proper measurements when rendered through a portal (i.e. Modals) @@ -37,5 +43,5 @@ export function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }: } onHeightChange(); } - }, [onHeightChange, value, inputRef, disabled]); + }, [onHeightChange, value, inputRef, disabled, inputWrapRef]); } diff --git a/src/inputs/internal/ComboBoxInput.tsx b/src/inputs/internal/ComboBoxInput.tsx index 0f8aee2ee..9d359c016 100644 --- a/src/inputs/internal/ComboBoxInput.tsx +++ b/src/inputs/internal/ComboBoxInput.tsx @@ -17,6 +17,7 @@ import { useTreeSelectFieldProvider } from "src/inputs/TreeSelectField/TreeSelec import { isLeveledNode } from "src/inputs/TreeSelectField/utils"; import { Value } from "src/inputs/Value"; import { maybeCall } from "src/utils"; +import { useGrowingTextField } from "src/inputs/hooks/useGrowingTextField"; interface ComboBoxInputProps extends PresentationFieldProps { buttonProps: any; @@ -94,11 +95,22 @@ export function ComboBoxInput(props: ComboBoxInputProps getOptionLabel(o)); + useGrowingTextField({ + // This says: When using a multiselect, then only enable the growing textfield when we are focused on it. + // Because otherwise, we're not displaying the input element that dictates the height (we're displaying ). This would cause incorrect calculations + disabled: (isMultiSelect && (!allowWrap || !isFocused)) || (!isMultiSelect && !allowWrap), + inputRef, + inputWrapRef, + value: inputProps.value, + }); + return ( } + unfocusedPlaceholder={ + showChipSelection && + } inputRef={inputRef} inputWrapRef={inputWrapRef} errorMsg={errorMsg} diff --git a/truss-config.ts b/truss-config.ts index f77e3a302..2bf917ad9 100644 --- a/truss-config.ts +++ b/truss-config.ts @@ -129,6 +129,7 @@ const sections: Sections = { width: "1px", padding: 0, whiteSpace: "nowrap", + opacity: 0, }), ], contentEmpty: () => [newMethod("contentEmpty", { content: "''" })],