luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix not filling cell (#4099)

Browse source 
* fix(editable): make autoExpand stretch to parent width

* fix(editable): adjust snapshot against the new editable

* fill URLProperty to parent width

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Muhammad Redho Ayassa 2022-11-08 23:37:06 +07:00 committed by GitHub
parent d39abc305d
commit e83b05b661
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 8 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
View file

@ -6,7 +6,7 @@ exports[`components/propertyValueElement Generic fields should allow cancel 1`]
class="Editable octo-propertyvalue"
placeholder="Empty"
spellcheck="true"
style="width: 5px;"
style="width: 100%;"
title=""
value=""
/>
@ -94,7 +94,7 @@ exports[`components/propertyValueElement should match snapshot, person, array va
class="Editable octo-propertyvalue"
placeholder="Empty"
spellcheck="true"
style="width: 5px;"
style="width: 100%;"
title=""
value=""
/>

6
webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
View file

@ -66,7 +66,7 @@ exports[`components/cardDetail/CardDetailProperties cancel on delete dialog shou
<input
class="Editable octo-propertyvalue"
placeholder="Empty"
style="width: 5px;"
style="width: 100%;"
title="1234"
value="1234"
/>
@ -159,7 +159,7 @@ exports[`components/cardDetail/CardDetailProperties should match snapshot 1`] =
<input
class="Editable octo-propertyvalue"
placeholder="Empty"
style="width: 5px;"
style="width: 100%;"
title="1234"
value="1234"
/>
@ -252,7 +252,7 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
<input
class="Editable octo-propertyvalue"
placeholder="Empty"
style="width: 5px;"
style="width: 100%;"
title="1234"
value="1234"
/>

2
webapp/src/properties/url/__snapshots__/url.test.tsx.snap
View file

@ -8,7 +8,7 @@ exports[`properties/link should match snapshot for link with empty url 1`] = `
<input
class="Editable octo-propertyvalue"
placeholder=""
style="width: 5px;"
style="width: 100%;"
title=""
value=""
/>

1
webapp/src/properties/url/url.scss
View file

@ -2,6 +2,7 @@
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
.link {
flex: 1 1 auto;

11
webapp/src/widgets/editable.tsx
View file

@ -116,13 +116,6 @@ export function useEditable(
}
}
function borderWidth(style: CSSStyleDeclaration): number {
return (
parseInt(style.borderLeftWidth || '0', 10) +
parseInt(style.borderRightWidth || '0', 10)
)
}
const Editable = (props: EditableProps, ref: React.Ref<Focusable>): JSX.Element => {
const elementRef = useRef<HTMLInputElement>(null)
const elementProps = useEditable(props, ref, elementRef)
@ -130,9 +123,7 @@ const Editable = (props: EditableProps, ref: React.Ref<Focusable>): JSX.Element
useLayoutEffect(() => {
if (props.autoExpand && elementRef.current) {
const input = elementRef.current
const computed = getComputedStyle(input)
input.style.width = 'auto'
input.style.width = `${input.scrollWidth + borderWidth(computed) + 1}px`
input.style.width = '100%'
}
})