I was getting an issue regarding auto focus in Ionic 4 and Angular 8 App
While I was opening the search modal in app, I wanted to auto focus on search box
For that I found the solution
I have added reference element on Input field
Ionic Code
<ion-input placeholder="Search for Products" #product_id></ion-input>
Search Modal Component Code
import { IonInput } from '#ionic/angular';
export class SearchModalComponent implements OnInit {
#ViewChild('product_id', {static:true}) product_id:IonInput;
ngAfterViewInit() {
setTimeout(() => {
this.product_id.setFocus();
},500);
}
}
Related
Does anyone know how can I show the property pane without creating webpart?
I want to show the property pane after clicking the User Management icon, which is created with extension
Taken from this repo which has some of the official samples from the SPFx extensions model and depicts a pretty close use-case to the one that you are searching, there is an element in Fluent UI called Panel.
As it is written in the documentation:
Panels are overlays that contain supplementary content and are used for complex creation, edit, or management experiences. For example, viewing details about an item in a list or editing settings.
Furthermore, scouring the repo we can see that the panel is triggered:
...
import { Panel, PanelType } from "office-ui-fabric-react/lib/Panel";
...
class GraphBot extends React.Component<IGraphBotProps, IGraphBotState> {
....
public render() {
// Be careful, the user Id is mandatory to be able to use the bot state service (i.e privateConversationData)
return (
<div className={ styles.banner }>
<ActionButton onClick= { this._login } checked={ true } iconProps={ { iconName: "Robot", className: styles.banner__chatButtonIcon } } className={ styles.banner__chatButton}>
{ strings.GraphBotButtonLabel }
</ActionButton>
<Panel
isOpen={ this.state.showPanel }
type={ PanelType.medium}
isLightDismiss={ true }
onDismiss={ () => this.setState({ showPanel: false }) }
>
{ this.state.isBotInitializing ?
....
}
</Panel>
</div>
);
}
There is an <ActionButton> with an OnClick Eventhandler to execute the below function :
private async _login() {
this.setState({
isBotInitializing :true,
showPanel: true,
});
....
The above function sets the showPanel prop to true and this prop is used in the Panel Component, where it checks when set to true to open the Panel and move on with the Business Logic of the application extension.
The same can be seen in the Fluent UI Documentation here, in the basic example.
import * as React from 'react';
import { DefaultButton } from '#fluentui/react/lib/Button';
import { Panel } from '#fluentui/react/lib/Panel';
import { useBoolean } from '#fluentui/react-hooks';
export const PanelBasicExample: React.FunctionComponent = () => {
const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
return (
<div>
<DefaultButton text="Open panel" onClick={openPanel} />
<Panel
headerText="Sample panel"
isOpen={isOpen}
onDismiss={dismissPanel}
// You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
closeButtonAriaLabel="Close"
>
<p>Content goes here.</p>
</Panel>
</div>
);
};
I have a modal and everytime when I have to navigate to other pages I have to close the modal and then go to that page. But I want to navigate to a particular page without dismissing the modal. Means opening page inside modal without really dismissing it and passing back data from that page to modal.
Is it possible to do it?
Thank you in advance
My code :
.ts to create modal
async address_modal(){
// console.log("clicked")
console.log(this.user_id)
const modal = await this.modalController.create({
component: AddressModalPage,
cssClass : 'address-modal',
componentProps : {
user_id : this.user_id
}
});
return await modal.present();
}
html to open modal from button
<ion-button(click)="address_modal()"> </ion-button>
modal.html // open another page
<ion-button routerLink="menu/items/address/add-address" style="text-transform:none" color= "primary" fill ="clear" (click) = "add_address()" >
<ion-icon name="add" ></ion-icon> Add new address
</ion-button>
I think the problem here is the routerLink, but i'm not really sure about this.
When i want to navigate from a modal to another page i use this.
export class test implements OnInit{
constructor(private router: Router) { }
moveNext(){
this.router.navigate([page]);
}
}
You just need to import this: import { Router } from '#angular/router';. And then put it on a button like this:
<ion-button expand="block" (click)="moveNext()">Go to next page </ion-button>
I'm building a Vue.js web application. I'm using CKEditor in a form that is placed inside a modal window. By design, the user's focus is "trapped" in the modal. In CKEditor, when user clicks the "Link" icon in toolbar, the editor opens a dialog box and attaches the new DOM element to 'document.body'. With respect to the DOM, the "Link" dialog is now outside of trapped focus. The user cannot click or tab his way to the "Link" dialog input.
I dug into the ckeditor5-ui source and found relevant code in balloonpanelview.js. I've unsuccessfully tried to configure CKEditor based on https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_dom_position-Options.html
In my Vue.js component, I have:
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
data: () => ({
editor: ClassicEditor,
editorConfig: {
toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'link'],
},
...
})
...
I want the CKEditor "Link" dialog DOM element to be attached to a DOM element id that I specify.
In Vuetify dialog component is required to disable retain-focus
<v-dialog :retain-focus="false" />
There may be much time since you opened the issue. However... This issue was happening to me too. This is happening because Bootstrap modal trap the focus in the active modal. If you're using bootstrap-vue, do this.
In your <b-modal> add the prop no-enforce-focus.
no-enforce-focus is reactive. To properly apply this workaround you can use this prop with a variable, that detects when your CKeditor have focus. If have focus, disable the enforce focus. If doesn't have, restore it. You can apply it by the following way:
<template>
<b-modal
...
:no-enforce-focus="editorFocus">
<ckeditor
...
#focus="toggleEditorFocus(true)"
#blur="toggleEditorFocus(false)"
/>
</b-modal>
</template>
<script>
export default {
...
data () {
return {
editorFocus: false
}
},
methods: {
toggleEditorFocus (val = !this.editorFocus) {
setTimeout(() => {
this.editorFocus = val
}, 10)
}
}
}
</script>
I know the setTimeout is a tricky method, but at least is working now for me.
I'm using the react-select control. The items displayed in the dropdown list are a combination of fixed items plus dynamically added items.
I'd like to be able to delete the dynamically generated items directly in the dropdown panel by adding an icon next to the label. When clicked this should remove the item.
I know the code to add/remove items programmatically. It's just a case of updating state. The thing I'm stuck on is how to add UI to the react-select dropdown panel and fire a click event when it's clicked on.
According to the docs you can replace the option component in react-select.
import React from 'react';
import Select from 'react-select';
const CustomOption = ({ innerProps }) =>
<div {...innerProps}>{/* your component internals */}</div>
class Component extends React.Component {
render() {
return <Select components={{ Option: CustomOption }} />;
}
}
That way you could add an icon <span onClick={() => this.deleteOption(optionId)}>×</span> to the CustomOption component and use css position: absolute etc. to get it where you want and style it, preferably through a className
I want to create in form in react native which has material input text.
same like shown here https://material.angular.io/components/input/overview
Here is my code
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, TextInput } from "react-
native";
export default class App extends Component<Props> {
render() {
return <TextInput style={styles.abcd} placeholder="Enter name" />;
}
}
const styles = StyleSheet.create({
abcd: {
borderBottomWidth: 0.25,
marginVertical: 2,
paddingHorizontal: 10
}
});
Here, I have used a placeholder, but if you see the form in the given link, then it's not placeholder. Also, the text is moving in an upward direction, when we are clicking on the field. The same thing I want to achieve here.
I don't want to use any libraries like textField or any other library.
The placeholder prop on TextInput components has the place-holding text disappear upon the start of input. To achieve what you want to do, you can overlay a Text component over your TextInput component and map its style to a state variable. Upon focus, change the Text component's styling accordingly.
Buddy,
There are two things
1. React-Native material input box is only available in Android by default.
2. On iOS, (iPhone or iPad) you will see normal InputBox
To see the material input box on iOS devices, you have to do lots of coding. The best solution is to integrate third-party libraries like react-native-paper
Please refer a working example over here with react-native-paper library
https://github.com/callstack/react-native-paper/blob/master/example/src/TextInputExample.js