Skip to content

Commit 3a6d3bd

Browse files
authored
fix(ui): crop width and height inputs limited to -1 of max (#15101)
### What Crop width/height inputs can now be incremented to the original image dimensions ### Why Users were unable to increment crop dimensions back to the full original size using arrow keys. The inputs would max out at `originalSize - 1`, even though typing the max value directly worked fine. ### How Removed redundant pixel-based validation in `fineTuneCrop` that was blocking state updates when dimensions equaled the original size. The percentage-based validation already handles invalid values (≤0% and >100%). Fixes #14758
1 parent 6025eff commit 3a6d3bd

File tree

2 files changed

+29
-7
lines changed

2 files changed

+29
-7
lines changed

packages/ui/src/elements/EditUpload/index.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -113,17 +113,11 @@ export const EditUpload: React.FC<EditUploadProps> = ({
113113

114114
const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {
115115
const intValue = parseInt(value)
116-
if (dimension === 'width' && intValue >= uncroppedPixelWidth) {
117-
return null
118-
}
119-
if (dimension === 'height' && intValue >= uncroppedPixelHeight) {
120-
return null
121-
}
122116

123117
const percentage =
124118
100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))
125119

126-
if (percentage === 100 || percentage === 0) {
120+
if (percentage <= 0 || percentage > 100) {
127121
return null
128122
}
129123

test/uploads/e2e.spec.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1549,6 +1549,34 @@ describe('Uploads', () => {
15491549
const resizeOptionMedia = page.locator('.file-meta .file-meta__size-type')
15501550
await expect(resizeOptionMedia).toContainText('200x200')
15511551
})
1552+
1553+
test('should allow incrementing crop dimensions back to original maximum size', async () => {
1554+
await page.goto(mediaURL.create)
1555+
1556+
await page.setInputFiles('input[type="file"]', path.join(dirname, 'test-image.jpg'))
1557+
1558+
await page.locator('.file-field__edit').click()
1559+
1560+
const widthInput = page.locator('.edit-upload__input input[name="Width (px)"]')
1561+
const heightInput = page.locator('.edit-upload__input input[name="Height (px)"]')
1562+
1563+
await expect(widthInput).toHaveValue('800')
1564+
await expect(heightInput).toHaveValue('800')
1565+
1566+
await widthInput.fill('799')
1567+
await expect(widthInput).toHaveValue('799')
1568+
1569+
// Increment back to original using arrow up
1570+
await widthInput.press('ArrowUp')
1571+
await expect(widthInput).toHaveValue('800')
1572+
1573+
await heightInput.fill('799')
1574+
await expect(heightInput).toHaveValue('799')
1575+
1576+
// Increment back to original using arrow up
1577+
await heightInput.press('ArrowUp')
1578+
await expect(heightInput).toHaveValue('800')
1579+
})
15521580
})
15531581

15541582
test('should see upload previews in relation list if allowed in config', async () => {

0 commit comments

Comments
 (0)