IonReorder is not working in iOS - Ionic React - reactjs

The code is working fine in a browser, but when I build the native project in xcode, once I start dragging the item it just freezes, and showing an error:
**------ STARTUP JS ERROR ------**
**⚡️ TypeError: e.selectionStart is not a function. (In 'e.selectionStart()', 'e.selectionStart' is undefined)**
**⚡️ URL: capacitor://localhost/static/js/5726.e89fffc0.chunk.js**
**⚡️ 5726.e89fffc0.chunk.js:1:1937**
**⚡️ See above for help with debugging blank-screen issues**
I looked for the file but I really couldn’t figure out what to do to fix this. I googled selectionStart but nothing is related to IonReorder.
And here is my code:
<IonReorderGroup disabled={false}
onIonItemReorder={(event) =>{
console.log('dragged');
event.detail.complete();
}}
>
<IonItem lines='none'>
<IonText className='text-small'>Item 1</IonText>
<IonReorder slot='end'>
</IonReorder>
</IonItem>
<IonItem lines='none'>
<IonText className='text-small'>Item 2</IonText>
<IonReorder slot='end'>
</IonReorder>
</IonItem>
<IonItem lines='none'>
<IonText className='text-small'>Item 3</IonText>
<IonReorder slot='end'>
</IonReorder>
</IonItem>
</IonReorderGroup>
The code is working fine in a browser but not in iOS.

Related

How do I handle file change event in Ionic

I am creating a form where I need to attach a file. I am using the IonInput component:
<IonList>
<IonItem>
<IonLabel position="stacked">Select application cover photo</IonLabel>
<IonInput
accept="image/*"
type="file"
value={application.cover}
placeholder="Select application cover photo"
name="cover"
onIonChange={e => setApplication({
...application,
cover: e.target.files[0]
})}
/>
</IonItem>
</IonList>
The selected file is correctly displaying inside of the IonInput but when I try to set it to the application state, I get the following error:
e.target.files is undefined
I have tried to log out the target and as I suspected, the files property is not in there. I couldn't find any property where the files are stored.
I tried running the same code but with regular input instead of IonInput and it works as expected.
Here are the versions I am using:
"#ionic/react": "^6.0.0",
"#ionic/react-router": "^6.0.0",

Issue with onChange event in ant design upload component in react

I am trying to receive the files uploaded in the ant design upload component using the onCHange event but I keep encountering an error
"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'files')".
The code:
<Form.Item>
<Form.Item name="dragger" valuePropName="fileList" noStyle>
<Upload.Dragger // onChange={(e)=> handleInputChange("file", e.target.files[0])}
beforeUpload={() => false}
name="files"
accept=".apng,.avif,.gif,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.png,.svg,.webp"
action=""
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="text-dark">Click or drag file to this area to upload</p>
<p className="text-muted">Support for PNG, JPG, GIF up to 10MB.</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
I intend to manipulate the file in a function. I don't want to use the ant design upload component's upload functionality. I only wanted the drag and drop UI.
The solution:
ant-design doesn't return the usual event object but it's own object. The object has another object called file which would have suited my code.
Therefore, I should have used: e.file instead of e.target.files[0]
That solves the error!

Ant Design: Warning: [antd: Upload] `transformFile` is deprecated. Please use `beforeUpload` directly :ReactJs

I am using react ja to build an application. To build it i am using Ant Design library. From Ant Design i use Upload(link) component.
The component looks like this:
<Upload
name="file"
listType="picture-card"
className="avatar-uploader"
showUploadList={true}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
onChange={this.handleChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>
Running the app in develop mode i get
Warning: [antd: Upload] `transformFile` is deprecated. Please use `beforeUpload` directly.
warning # warning.js:6
Question: Why this warning appears even i don't use transformFile in my component? Also i don't want to use beforeUpload, why should i use it mandatory? Who faced with the same issue?
You have to upgrade your Antd version, to '4.12.3'
That warning is removed from v4.10.0.
https://github.com/ant-design/ant-design/releases/tag/4.10.0

Firefox and Semantic UI React: display problems of modal windows

I am developing a web application using React and Semantic UI React as a front-end framework. The application is tested and works in Chrome, Microsoft Edge, Safari and Mozilla Firefox. However in this last browser I noticed a problem with iframes. The image below shows a modal window with iframe with a pdf. The window opens correctly but as soon as I try to click inside it or scroll the pdf downwards, the modal window is displayed incorrectly.
I tried to identify any problems in the rendered HTML code using the Firefox developer tools (F12) but I didn't notice anything.
 
I am using Firefox v77.0.1 64bit (latest version) and the modal window is implemented as follows:
<Modal closeIcon open={this.state.open} onClose={this.onClose}>
<Modal.Content>
<Steps ... />
<div style={{ width: "100%", height: "500px" }}>
<Iframe url={...} width={"100%"} height={"460px"} />
<Checkbox ... />
</div>
</Modal.Content>
<Modal.Actions>
<Button color='red' onClick={this.props.onRefuse}>
<Icon name='remove' />
Refuse
</Button>
<Button color='green' onClick={this.props.onAccept}>
<Icon name='check' />
Accept
</Button>
</Modal.Actions>
</Modal>

Gatsby build doesn't take react bootstrap size prefix after page reload

I am having an issue with Gatsby bootstrap or react-bootstrap (not sure yet, most likely it is bootstrap). Everything looks great when I build and serve gatsby website, it has all bootstrap classes and nice grid ( 2 columns, one is md="8" another is md="4"). But once I reload the page and when I inspect the code in the Chrome browser, bootstrap classes disappear.
Code in Gatsby page (added className just to make sure that it is not coming after reaload):
{window.innerWidth > 992 ? (
<Col md="8">
<NameAndHealine />
<ListingText />
</Col>
<Col md="4">
<PricingSidebBar />
</Col>
) : (
<Col xs="12">
<NameAndHealine />
</Col>
<Col xs="12">
<PricingSidebBar />
</Col>
<Col xs="12" className="mt-5">
<ListingText />
</Col>
)
Code example before page reload:
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
Code example after page reload:
<div class="col-12">...</div>
<div class="col-12">...</div>
Steps what I tried to solve the problem:
Import bootstrap.css and bootstrap.js inside gatsby-browser.js
Add extra className with bootstrap classes to make sure it is not coming after page reload.
EDIT:
I found the issue, it is with window.innerWidth as I was ordering components depending on it. I changed it to multiple rows and set display classes for different screens. After page reload Gatsby doesn't take classes when it is inside if (window.innerWidth > 992) (why?). If someone knows the answer please let me know, thanks.
EDIT 2
Added extra code above

Resources