File Manager Extension Fields Not Allowing Text Value To Start With Upper Case Letters

[JetRafael]

Version

5.39.1

Operating System

Windows 10

Browser

Chrome

What are the steps to reproduce this bug?

Step 1: Create a simple File Manager Extension Field of type "text".

Step 2: Create file manager extension field decorator

Step 3: Start typing text which start with upper case (ie: Sample-Text) using Shift key. See video below: https://github.com/webiny/webiny-js/assets/39615398/4b82f7c9-01b9-4650-bd60-1e73eb6c4eae

What is the expected behavior?

User should be able to type in text of any format since the field type is just a simple "text" field the same as the default file manager Name and Tag fields.

What do you see instead?

Holding shift key to type in upper cased text will not render any text in the text field. The extension text field rather are flickering. See attached video below: https://github.com/webiny/webiny-js/assets/39615398/459785c9-64b8-43f5-97bb-27a0e9e083b8

Additional information

No response

Possible solution

No response

[Pavel910]

@JetRafael I have an idea why this is happening. And it's not related to the inputs at all. It has to do with shift+select of files in the browser. I think the handler of "shift" key is capturing "too much".

[JetRafael]

@JetRafael I have an idea why this is happening. And it's not related to the inputs at all. It has to do with shift+select of files in the browser. I think the handler of "shift" key is capturing "too much".

I noticed that pressing the shift key triggers the entire extension field decorator.

[Pavel910]

@JetRafael Very weird, I just tested this, and I can't reproduce what you're experiencing in the video. For me, shift key works everywhere. I'm testing on the upcoming 5.40., but we haven't done any changes in the File Manager for a while 🤔

https://github.com/webiny/webiny-js/assets/3920893/3e4efba2-56b4-4bc7-af69-347792617115

This is my code:

createFileModelModifier(({ modifier }) => {
    modifier.addField({
        id: "customField1",
        fieldId: "customField1",
        label: "Custom Field 1",
        helpText: "Enter an alphanumeric value.",
        type: "text",
        renderer: {
            name: "text-input"
        },
        bulkEdit: true
    });

    modifier.addField({
        id: "customField2",
        fieldId: "customField2",
        label: "Custom Field 2",
        helpText: "Enter a numeric value.",
        type: "number",
        renderer: {
            name: "number-input"
        }
    });
}),

[JetRafael]

@Pavel910 Did you create File Extension Field Decorator for your fields?

[Pavel910]

@JetRafael yes, seems to be working as well. Here's my full code in apps/admin/src/App.tsx

import React from "react";
import { Admin } from "@webiny/app-serverless-cms";
import { Cognito } from "@webiny/app-admin-users-cognito";
import { FileManagerViewConfig, useFile } from "@webiny/app-file-manager";
import { CmsModelField } from "@webiny/app-headless-cms/types";
import "./App.scss";

const { FileDetails } = FileManagerViewConfig;

const fieldWithCustomRenderer = (field: CmsModelField): CmsModelField => {
    return {
        ...field,
        renderer: () => {
            console.log("Render null for field", field);
            return null;
        }
    };
};

const ExtensionFieldDecorator = FileDetails.ExtensionField.createDecorator(Original => {
    return function FieldDecorator(props) {
        const { file } = useFile();

        if (props.field.id === "customField2" && file.type.includes("image/")) {
            return <Original {...props} field={fieldWithCustomRenderer(props.field)} />;
        }

        return <Original {...props} />;
    };
});

export const App: React.FC = () => {
    return (
        <Admin>
            <Cognito />
            <FileManagerViewConfig>
                <ExtensionFieldDecorator />
            </FileManagerViewConfig>
        </Admin>
    );
};

https://github.com/webiny/webiny-js/assets/3920893/87a8bb4d-690b-417a-88e6-ccec0dbbb998

Maybe the problem for you is in how you register the decorator? Compare myh App.tsx with yours.

[JetRafael]

@Pavel910 I have tried as far as replicating your exact same code in my local. I still have the same issue. I have noticed that pressing the shift key would log "Render null for field" four times. 2 for KEY DOWN and 2 for KEY UP.

[Pavel910]

@JetRafael if I can't replicate it, I can't begin to fix it :) I really do need to have a reproduction case. Maybe you can share your current state of the Admin app with me over Slack, so I can just C/P it into my local project?

[Pavel910]

This is fixed in the upcoming 5.40.0, fix is already merged into the next branch.