React Carbon TextInput placed in Nested modal uneditable for native app

Question

I'm new to React and Tauri framework is used to package my React application as a desktop app. I am using React Carbon components and the TextInput field placed inside a modal works in the browser but not when I package the app for desktop.

Please do not mark this question as duplicate. I tried out the solutions in all suggested answers, but they do not work as my use case is different (issue is only with desktop app, not on browser). I tried setting the value via props, but that still leaves the input uneditable with value set.

I added a logger in onChange function but it is not getting called at all.

Edit - Discovered that TextInput are uneditable only when they are on a Nested modal. That is when a second modal is opened by clicking a button on the first modal.

If it helps - I'm running the desktop app on macOS.

import React, { useState } from "react";
import { Modal, TextInput, Tabs, Tab } from "carbon-components-react";
import { Button, TabList, TabPanel, TabPanels } from "@carbon/react";

function func(props) {

   const [showAddAddressModal, setShowAddAddressModal] = useState(false);
   const [address, setAddress] = useState(props.address);

   const onAddressChange = (event) => {
        let val = event.target.value;
        setAddress(val);
    };

    const onClickAddAddress = () => {
        setShowAddAddressModal(true);
    };

    return(
        {showFirstModal && (
            <Modal
                passiveModal
                size="sm"
                open={showFirstModal}
                modalHeading="Settings"
                onRequestClose={closeFirstModal}
            >
                <Tabs>
                    <TabList>
                        <Tab>Addresses</Tab>
                    </TabList>
                    <TabPanels>
                        <TabPanel>
                            <div>
                                <Button onClick={onClickAddAddress} size="md">
                                        Add New
                                </Button>
                            </div>
                        </TabPanel>
                    </TabPanels>
                </Tabs>
            </Modal>
        )}
        {showAddAddressModal && (
             <Modal
                size="md"
                open={showAddAddressModal}
                modalHeading="Add Address"
                primaryButtonText="Add"
                secondaryButtonText="Cancel"
                onRequestClose={closeAddAddressModal}
                onRequestSubmit={addAddress}
             >

                <TextInput
                    id="address-text"
                    labelText="Address"
                    value={address}
                    autoComplete="off"
                    onChange={onAddressChange}
                 />
            </Modal>
        )}
    );
}

export default func;

How do I fix this text field to be editable?

Answer 1

The issue was not due to state or code. All I needed to do was to close the first modal so that second modal would be the one in focus.

This made sense since the text fields in all other modals were working since that was the only modal open. But when a second modal was opened, if I may say, the focus, did not shift to second.

I'm not sure about what this property is, but this is how I could get it to work.

Code wise, I made this change -

const onClickAddAddress = () => {
   setShowAddAddressModal(true);   // Open second modal
   setShowFirstModal(false);       // Close first modal
};

const addAddress = () => {
    ...
    setShowAddAddressModal(false);    // Close second modal after performing actions
    // You can open the first modal if required
};

Answer 2

it seems you have a functional component that renders two modals. on the second modal, you have a component for the address, but it's not updating because the value prop of the is set to address, and you are not handling the state properly for the address field. you are also missing the setState function to update the address.

Import the useState hook from React:

import React, { useState } from "react";

Initialize a state variable for the address field and a state update function. You should also ensure that showAddAddressModal is set to true when you want to show the second modal:

function func(props) {
  const [showAddAddressModal, setShowAddAddressModal] = useState(false);
  const [address, setAddress] = useState(props.address);

  // ...
  const onAddressChange = (event) => {
    const val = event.target.value;
    setAddress(val);
  };

  // ...
}

In the component, bind the value prop to the address state and the onChange prop to the onAddressChange function to make it editable:

<TextInput
    id="address-text"
    labelText="Address"
    value={address}
    autoComplete="off"
    onChange={onAddressChange}
/>