fix(ui): prevents hasMany text going outside of input boundaries (#7455)

## Description

V2 PR [here](https://github.com/payloadcms/payload/pull/7454)

`Before`:
![Screenshot 2024-07-31 at 12 40
50 PM](https://github.com/user-attachments/assets/ce61f4fc-e676-4273-aa4c-72610cb459b3)

`After`:
![Screenshot 2024-07-31 at 12 40
23 PM](https://github.com/user-attachments/assets/d92631eb-28fb-46ca-bc23-46c7916bba34)

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [x] Existing test suite passes locally with my changes
This commit is contained in:
Patrik
2024-08-05 17:10:35 -04:00
committed by GitHub
parent 62666a9897
commit 3f5403a52a
5 changed files with 15 additions and 5 deletions

View File

@@ -1,4 +1,4 @@
import type { AnySQLiteColumn} from 'drizzle-orm/sqlite-core'; import type { AnySQLiteColumn } from 'drizzle-orm/sqlite-core'
import { index, uniqueIndex } from 'drizzle-orm/sqlite-core' import { index, uniqueIndex } from 'drizzle-orm/sqlite-core'

View File

@@ -47,11 +47,11 @@ export const LoginField: React.FC<LoginFieldProps> = ({ type, required = true })
validate={(value, options) => { validate={(value, options) => {
const passesUsername = username( const passesUsername = username(
value, value,
options as ValidateOptions<any, { email?: string }, any, string>, options,
) )
const passesEmail = email( const passesEmail = email(
value, value,
options as ValidateOptions<any, { username?: string }, any, string>, options,
) )
if (!passesEmail && !passesUsername) { if (!passesEmail && !passesUsername) {

View File

@@ -21,7 +21,7 @@
} }
&--is-multi { &--is-multi {
width: calc(100% + base(0.5)); width: calc(100% + base(0.25));
&.rs__value-container--has-value { &.rs__value-container--has-value {
padding: 0; padding: 0;

View File

@@ -10,6 +10,12 @@
} }
} }
.has-many {
.rs__input-container {
overflow: hidden;
}
}
html[data-theme='light'] { html[data-theme='light'] {
.field-type.text { .field-type.text {
&.error { &.error {

View File

@@ -12,7 +12,11 @@ const Hooks: CollectionConfig = {
hooks: { hooks: {
beforeOperation: [ beforeOperation: [
({ operation, req }) => { ({ operation, req }) => {
if (typeof req.payload.db.beginTransaction === 'function' && !req.transactionID && ['create', 'delete', 'update'].includes(operation)) { if (
typeof req.payload.db.beginTransaction === 'function' &&
!req.transactionID &&
['create', 'delete', 'update'].includes(operation)
) {
throw new Error('transactionID is missing in beforeOperation hook') throw new Error('transactionID is missing in beforeOperation hook')
} }
}, },