jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: Improve disabled state handling in CustomInputPopover and InputGlobalComponent (#7213)

Browse source 
🐛 (popover/index.tsx): Fix issue where input field was not disabled when disabled prop is true
🐛 (popover/index.tsx): Fix issue where placeholder was not showing when input field is disabled
🐛 (inputGlobalComponent/index.tsx): Fix issue where handleDelete function was not considering the disabled prop when deleting a key
This commit is contained in:
Cristhian Zanforlin Lousa 2025-03-21 14:52:41 -03:00 • committed by GitHub
commit b081a219a0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
View file

@ -229,7 +229,7 @@ const CustomInputPopover = ({
className={getAnchorClassName(editNode, disabled, isFocused)} className={getAnchorClassName(editNode, disabled, isFocused)}
onClick={() => !nodeStyle && !disabled && setShowOptions(true)} onClick={() => !nodeStyle && !disabled && setShowOptions(true)}
> >
{selectedOptions?.length > 0 ? ( {!disabled && selectedOptions?.length > 0 ? (
<div className="mr-5 flex flex-wrap gap-2"> <div className="mr-5 flex flex-wrap gap-2">
{selectedOptions.map((option) => ( {selectedOptions.map((option) => (
<OptionBadge <OptionBadge
@ -240,7 +240,7 @@ const CustomInputPopover = ({
/> />
))} ))}
</div> </div>
) : selectedOption?.length > 0 ? ( ) : !disabled && selectedOption?.length > 0 ? (
<ShadTooltip content={selectedOption} side="left"> <ShadTooltip content={selectedOption} side="left">
<div <div
style={{ style={{
@ -262,7 +262,7 @@ const CustomInputPopover = ({
</ShadTooltip> </ShadTooltip>
) : null} ) : null}
{!selectedOption?.length && !selectedOptions?.length && ( {(!selectedOption?.length && !selectedOptions?.length) || disabled ? (
<input <input
autoComplete="off" autoComplete="off"
onFocus={() => setIsFocused(true)} onFocus={() => setIsFocused(true)}
@ -274,7 +274,7 @@ const CustomInputPopover = ({
onInputLostFocus?.(); onInputLostFocus?.();
setIsFocused(false); setIsFocused(false);
}} }}
value={value || ""} value={disabled ? "" : value || ""}
disabled={disabled} disabled={disabled}
required={required} required={required}
className={getInputClassName( className={getInputClassName(
@ -285,7 +285,9 @@ const CustomInputPopover = ({
blockAddNewGlobalVariable, blockAddNewGlobalVariable,
)} )}
placeholder={ placeholder={
selectedOptions?.length > 0 || selectedOption ? "" : placeholder !disabled && (selectedOptions?.length > 0 || selectedOption)
? ""
: placeholder
} }
onChange={(e) => onChange?.(e.target.value)} onChange={(e) => onChange?.(e.target.value)}
onKeyDown={(e) => { onKeyDown={(e) => {
@ -294,7 +296,7 @@ const CustomInputPopover = ({
}} }}
data-testid={editNode ? id + "-edit" : id} data-testid={editNode ? id + "-edit" : id}
/> />
)} ) : null}
</div> </div>
</PopoverAnchor> </PopoverAnchor>

4
src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx
View file

@ -34,7 +34,7 @@ export default function InputGlobalComponent({
); );
useEffect(() => { useEffect(() => {
if (globalVariables) { if (globalVariables && !disabled) {
if ( if (
load_from_db && load_from_db &&
!globalVariables.find((variable) => variable.name === value) !globalVariables.find((variable) => variable.name === value)
@ -56,7 +56,7 @@ export default function InputGlobalComponent({
); );
} }
} }
}, [globalVariables, unavailableFields]); }, [globalVariables, unavailableFields, disabled]);
function handleDelete(key: string) { function handleDelete(key: string) {
if (value === key && load_from_db) { if (value === key && load_from_db) {