search

Instawork / hyperview

Server-driven mobile apps with React Native
https://hyperview.org
MIT License
1.23k stars 57 forks source link

iOS: when text-field is focused, throw exception: TypeError null is not an object (evaluating 'o.isFocused') #232

Closed cengit closed 3 years ago

cengit commented 3 years ago

Hi, lately I got an exception for hyperview text-field, but this error is a random error, it did NOT happen every time image

exception detailed open a hyperview form, press on the text-field, when the text-field is focused, it will throw an exception: TypeError null is not an object (evaluating 'o.isFocused'), please see this video for reference: text-field error screen capture video

to reproduce the error:

with above these steps 10% chance this error would happen

env:

Do you have any idea, what is going wrong here or how to avoid this error ?

please note that: the exception is catched by react-native-exception-handler, using below code:.

import { setJSExceptionHandler } from "react-native-exception-handler";

const errorHandler = (e, isFatal) => {
  if (isFatal) {
    Alert.alert(
      "Unexpected error occurred",
      `
        Error: ${isFatal ? "Fatal:" : ""} ${e.name} ${e.message}
      `,
      [
        {
          text: "OK",
          onPress: () => {},
        },
      ]
    );
  } else {
    // console.log("error:", e);
  }
};

setJSExceptionHandler(errorHandler, true);

this is the hyperview page xml:

<doc lang="en" xmlns="https://hyperview.org/hyperview" xmlns:th="http://www.thymeleaf.org">
    <screen>
        <body style="Body Bg-White">
            <header style="Header">
                <text action="back" href="#" style="Header__Back">
                    &lt;
                    <text style="Header__Title">
                        <![CDATA[ ]]>
                        Achieve My Goal
                    </text>
                </text>
            </header>
            <view style="M-20" scroll="true">
                <text style="Text2">this is the plan.</text>
                <text style="Text1 M-T-20">Account type</text>

                <form id="allocateSavingForm">
                    <select-single name="tab" style="Tabs">
                        <option id="atAccountTypeBankAccounts" value="users" style="Tab" selected="true">
                            <text style="Tab__Label">Bank accounts</text>

                            <behavior trigger="select" action="set-value" new-value="BANKSAVE" target="accountType"/>
                        </option>
                        <option id="atAccountTypeCashSavings" value="groups" style="Tab">
                            <text style="Tab__Label">Cash savings</text>

                            <behavior trigger="select" action="set-value" new-value="SAVINGS" target="accountType"/>
                        </option>
                        <option id="atAccountTypeEWallet" value="tab3" style="Tab">
                            <text style="Tab__Label">E-Wallet</text>

                            <behavior trigger="select" action="set-value" new-value="EWALLETSAVE" target="accountType"/>
                        </option>
                    </select-single>
                    <text style="Text1 M-T-20">
                        Account name
                        <text style="Main-Red">*</text>
                    </text>
                    <text-field id="atAccountName" placeholder="Please input account name" placeholderTextColor="#8D9494" name="accountName" style="input" value="My account" />
                    <text style="Text1 M-T-20">
                        My balance for this goal
                        <text style="Main-Red">*</text>
                    </text>
                    <text-field id="atAccountBalance" placeholder="Please input balance" placeholderTextColor="#8D9494" mask="$ **********************" keyboard-type="number-pad" name="accountBalance" style="input" />
                    <text-field id="accountType" name="accountType" value="BANKSAVE" hide="true"/>
                    <text-field name="goalId" th:value="${goalId}" hide="true"/>
                    <view id="atAllocateSaving" style="Button Button-Big-Primary M-T-20">
                        <behavior href="/preview" action="replace" target="allocateSavingForm" verb="get"/>
                        <text style="Button-Label Text-Center">Allocate Saving</text>
                    </view>
                </form>

                <spinner id="mySpinner" hide="true" />

            </view>
        </body>
        <styles>
            <style id="input" borderBottomColor="#E1E1E1" borderBottomWidth="1" borderColor="#4E4D4D" flex="1" fontSize="16" fontWeight="normal" paddingBottom="8" paddingTop="8" />
            <style id="input-error" borderBottomColor="#FF4847" color="#FF4847">
                <modifier focused="true">
                    <style borderBottomColor="#FF4847" />
                </modifier>
            </style>
            <style id="Title1" fontWeight="700" fontSize="18" color="#2E384D" />
            <style id="Title2" fontWeight="600" fontSize="16" />
            <style id="Button-Label-Bold" fontWeight="600" fontSize="20" />
            <style id="Button-Big-Primary" fontSize="18" height="48" />
            <style id="Text-Center" textAlign="center" justifyContent='center' alignItems='center' />
            <style id="Button" borderColor="#F52B39" backgroundColor="#F52B39" borderWidth="1" borderRadius="20" justifyContent="center" paddingLeft="26" paddingRight="26" height="40" />
            <style id="Button-Label" color="#fff" fontSize="16" />
            <style id="Text1" fontSize="14" color="#5A6170" />
            <style id="Text2" fontSize="14" color="#596980" />
            <style id="Main-Red" color="#ED1B2E" />
            <style id="Main-Black" color="#2E3B4D" />
            <style id="Grey3" color="#8F9EB2" />
            <style id="Orange" color="#FA8025" />
            <style id="Green" color="#27BDB3" />
            <style id="Color-White" color="#fff" />
            <style id="Bg-White" backgroundColor="#fff" />

            <style id="Grey-Line" borderBottomWidth="1" borderColor="#F3F3F5" marginTop="15" marginBottom="15" />
            <style id="Bg-Banner" height="12" backgroundColor="#F3F3F5" />
            <style id="M-20" margin="20" />
            <style id="M-T-20" marginTop="20" />
            <style id="M-T-10" marginTop="10" />
            <style id="Flex-Center-Wrap" display="flex" flexDirection="row" justifyContent="space-between" alignItems="center" alignContent="center" />
            <style id="Tabs" flexDirection="row" marginTop="20" height="28" justifyContent="flex-start" />
            <style id="Tab" alignItems="center" backgroundColor="white" marginRight="10" paddingLeft="10" paddingRight="10" flexDirection="row" borderColor="#C4C7CC" borderWidth="1" borderRadius="16" justifyContent="center">
                <modifier selected="true">
                    <style backgroundColor="#FFF5F5" borderColor="#F52B39" />
                </modifier>
            </style>
            <style id="Tab__Label" fontSize="12" color="#5A6170" fontWeight="normal">
                <modifier selected="true">
                    <style color="#ED1B2E" />
                </modifier>
            </style>
            <style id="Header" paddingLeft="21" paddingRight="20" paddingBottom="10" paddingTop="10" backgroundColor="white" borderColor="#eee" borderBottomWidth="1" flexDirection="row" justifyContent="space-between" alignItems="flex-end"/>
            <style id="Header__Back" color="black" fontSize="18" fontWeight="600" />
            <style id="Header__Title" color="black" fontSize="16" fontWeight="bold" />
            <style id="Header_Logo" width="106" height="21" />
            <style id="Body" flex="1" />
            <style id="Color-Warning" color="#F52B39" />
        </styles>
    </screen>
</doc>
terryatgithub commented 3 years ago

after some operations before, it caused the issue below: https://github.com/wix/react-native-keyboard-aware-scrollview/pull/44

ashwinibm commented 3 years ago

Hi @cengit I was unable to reproduce the issue. I’ve used your markup with only one change - I’m moving to another screen on form submit. Env:

https://user-images.githubusercontent.com/2883006/109954570-808e8900-7d07-11eb-8983-f393638d977c.mp4

I wanted to check whether it’s due to the keyboard aware library issue mentioned in https://github.com/Instawork/hyperview/issues/232#issuecomment-790296568. But since I’m unable to reproduce the issue, would you be able to remove scroll=“true” from the parent view and see if the issue still persists? If it’s not a scroll view, the library does not get invoked.

cengit commented 3 years ago

thanks for the reply @ashwinibm
ok, I will remove scroll=“true” for some test, will update the result tomorrow. but Terry's PR (comment #232) did solve my problem, we have test the same scenario with his latest code.

update:according to my colleague's test, after removing scroll=“true” from the page, everything works fine, no error popup

adamstep commented 3 years ago

@cengit We've merged the fix in the latest release (0.37.1)

cengit commented 3 years ago

thanks a lot, we create new build with latest release (0.37.1), so far so good(👍