Lit-Element updated .props not invoking full re-render of child component, i.e. the javascript code inside firstUpdated() of child constructs a leaflet map based on .props being passed in from parent component, when the parent component updates location and city, it doesn't create a re-render of the map with new location and city.
When user clicks on button to update location from Seattle to Toronto, the parents props are updated and passed to child, however, the map doesn't rebuild itself, how do I force the map to be "rebuilt" (re-rendered) based on the new .props being passed into the child ??
Git repo for my working sample code
THANKS! :) Been struggling with this for days on end - FYI new to Lit-Element.
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="./styles.css"
<script src="./webcomponents/webcomponents-loader.js"></script>
<script>
if (!window.customElements) { document.write('<!--'); }
</script>
<script src="./webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKERS -->
</head>
<body>
<app-view></app-view>
</body>
</html>
Index.js:
import './views/app-view.js'
Parent component app-view.js
import { html, LitElement } from 'lit-element';
import './esri-map.js'
class AppView extends LitElement{
static get properties() {
return {
location: { type: Object },
city: { type: String }
}
}
constructor() {
super();
// set fallback location to seattle -- GET will pull in coordinates for Toronto
this.location = { lat: "47.608013", long: "-122.335167" }
this.city = "Seattle"
}
render() {
return html`
<style>
#app-container{
width: 100%,;
height: 100%;
display: flex;
}
#map-container{
flex-grow: 1;
height: 800px;
}
</style>
<button #click=${ (event) => this.updateLocation() }
>Set to Toronto
</button>
<div id="app-container">
<div id="map-container">
<esri-map
.location=${this.location}
.city=${this.city}
>
</esri-map>
</div>
</div>
`;
}
updateLocation(){
var oldLocation = this.location;
this.location = { lat: "43.651070", long: "-79.347015"} // Set to Toronto
this.city = "Toronto"; // Set to Toronto
console.log("New location is: " + this.city)
console.log("Coordinates: ");
console.log(this.location);
}
}
customElements.define('app-view', AppView);
Child Component
import { html, LitElement } from 'lit-element';
import * as L from 'leaflet';
import * as esri from 'esri-leaflet';
class EsriMap extends LitElement{
static get properties() {
return {
location: { type: Object }, // prop passed from parent
city: { type: String } // prop passed from parent
}
}
render() {
return html`
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"/>
<style>
#map{
height: 100%;
width: 100%;
}
</style>
<h2>Current City: ${this.city} </h2>
<h3>Coordinates: Lat: ${this.location.lat}</h3>
<div id="map"></div>
`
}
firstUpdated() {
const mapNode = this.shadowRoot.querySelector('#map');
// Render map with props from parent component
var map = L.map(mapNode, {
maxZoom: 18,
minZoom: 2,
}).setView([this.location.lat, this.location.long],8); // [Lat,Lng]
const esriLayer = esri.basemapLayer('Streets');
map.addLayer(esriLayer);
// Render circle with props from parent component
var circle = L.circle([this.location.lat, this.location.long], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 20000,
}).addTo(map);
}
}
customElements.define('esri-map', EsriMap);
When properties change, the render() function gets invoked.
firstUpdated() gets only invoked after the first update and not on every property change.
Try this:
updated(changedProps) {
if (changedProps.has('location')) {
this._setMap();
}
}
_setMap() {
const mapNode = this.shadowRoot.querySelector('#map');
if (mapNode == null || this.location == null) {
return;
}
// Render map with props from parent component
var map = L.map(mapNode, {
maxZoom: 18,
minZoom: 2,
}).setView([this.location.lat, this.location.long],8); // [Lat,Lng]
const esriLayer = esri.basemapLayer('Streets');
map.addLayer(esriLayer);
// Render circle with props from parent component
var circle = L.circle([this.location.lat, this.location.long], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 20000,
}).addTo(map);
}
Related
I am trying to add Stripe Subscription to my Blazor WASM Application following these instructions Since they are using JavaScript I am using the JavaScript interop. I added Stripe's script to my index.html and added a custom script with the javascript they have in the instructions.
Index.html inside the <head> tag
<script src="https://js.stripe.com/v3/"></script>
<script src="stripescript.js"></script>
stripescript.js:
let stripe = window.Stripe('MY PUBLIC KEY');
let elements = stripe.elements();
let card = elements.create('card', { style: style });
card.mount('#card-element');
card.on('change', function (event) {
displayError(event);
});
function displayError(event) {
changeLoadingStatePrices(false);
let displayError = document.getElementById('card-element-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
}
function createPaymentMethod(cardElement, customerId, priceId) {
return stripe
.createPaymentMethod({
type: 'card',
card: cardElement,
})
.then((result) => {
if (result.error) {
displayError(error);
} else {
//change this to call .net
createSubscription({
customerId: customerId,
paymentMethodId: result.paymentMethod.id,
priceId: priceId,
});
}
});
}
My assumption is that the variable initializations would happen when the application is loaded. However, when I add the following HTML to my Razor page is not populating the card component.
<form id="payment-form">
<div id="card-element">
<!-- Elements will create input elements here -->
</div>
<!-- We'll put the error messages in this element -->
<div id="card-element-errors" role="alert"></div>
<button type="submit">Subscribe</button>
</form>
I am lost on how to debug this, or if this is even possible in Blazor.
Thanks to #Umair's Comments, I realized that I had made a few mistakes and some of them were showing up in the console since I was trying to initialize the card element before the DOM was loaded. I was able to fix my problem by first changing the card mount into its own function. Here is the full stripescript.js for future people that have this problem:
let stripe = window.Stripe('MY KEY');
let elements = stripe.elements();
let style = {
base: {
fontSize: '16px',
color: '#32325d',
fontFamily:
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
fontSmoothing: 'antialiased',
'::placeholder': {
color: '#a0aec0',
},
},
};
let card = elements.create('card', { style: style });
function mountCard() {
card.mount('#card-element');
}
card.on('change', function (event) {
displayError(event);
});
function displayError(event) {
changeLoadingStatePrices(false);
let displayError = document.getElementById('card-element-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
}
function createPaymentMethod(cardElement, customerId, priceId) {
return stripe
.createPaymentMethod({
type: 'card',
card: cardElement,
})
.then((result) => {
if (result.error) {
displayError(error);
} else {
//todo change this to call .net
createSubscription({
customerId: customerId,
paymentMethodId: result.paymentMethod.id,
priceId: priceId,
});
}
});
}
and added the following C# code to my Blazor component to render the card:
[Inject] IJSRuntime js { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await js.InvokeVoidAsync("mountCard");
}
I found a solution for this on Youtube that is super complicated, and I decided to create my own implementation following KISS.
I have streamlined youtube's implementation on a single StripeCard component that interacts with my custom Js StripeInterop. I hope this makes your life easier.
This will allow you to have different publishable keys for your different environments without hardcoding it and reuse the component in multiple pages if you wish. Also, it will destroy itself when the component is used.
Here is my solution for (blazor webassembly).
Add this to index.html
<!-- Stripe -->
<script src="https://js.stripe.com/v3/"></script>
<script src="stripescript.js"></script>
Here is stripescript.js
StripeInterop = (() => {
var stripe = null;
var elements = null;
var dotNetReference = null;
var card = null;
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
return {
init(dotnetHelper, publishableKey) {
stripe = window.Stripe(publishableKey);
elements = stripe.elements();
card = elements.create('card', { style: style });
dotNetReference = dotnetHelper;
card.mount('#card-element');
card.on('change', function (event) {
displayError(event);
});
},
createPaymentMethod(billingEmail, billingName) {
return stripe
.createPaymentMethod({
type: 'card',
card: card,
billing_details: {
name: billingName,
email: billingEmail
}
})
.then(function (result) {
if (result.error) {
displayError(result);
} else {
dotNetReference.invokeMethodAsync('ProcessPaymentMethod', result.paymentMethod.id);
}
});
},
destroy() {
dotNetReference.dispose();
card.destroy();
}
};
function displayError(event) {
var showError = document.getElementById('card-element-errors');
if (event.error) {
showError.textContent = event.error.message;
} else {
showError.textContent = '';
}
}
})();
Here is StripeCard.razor component
#namespace SmartApp.Components
<div id="card-element" style="display: block;
width: 100%;
padding: 0.52rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;">
</div>
<div id="card-element-errors" class="validation-message"></div>
Here is StripeCard.razor.cs
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace SmartApp.Components
{
public partial class StripeCard : IDisposable
{
[Inject] IJSRuntime JS { get; set; }
[Parameter] public string PublishableKey { get; set; }
[Parameter] public EventCallback<string> CardProcessedCallBack { get; set; }
private bool _firstTime;
protected override async Task OnInitializedAsync()
{
_firstTime = true;
await base.OnInitializedAsync();
}
public async void Dispose()
{
await JS.InvokeVoidAsync("StripeInterop.destroy");
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (_firstTime)
{
_firstTime = false;
await JS.InvokeVoidAsync("StripeInterop.init", DotNetObjectReference.Create(this), PublishableKey);
}
}
[JSInvokable("ProcessPaymentMethod")]
public Task ProcessPaymentMethod(string paymentId)
{
return CardProcessedCallBack.InvokeAsync(paymentId);
}
}
}
Here is how we use StripeCard.razor in our Page.
#page "/subscription/payment"
#attribute [Authorize(Roles = "Admin,Organisation")]
#inject IJSRuntime JS
<div class="card card-custom card-shadowless rounded-top-0">
<div class="card-body p-0">
<div class="row justify-content-center py-8 px-8 py-lg-15 px-lg-10">
<div class="col-xl-12 col-xxl-7">
<!--begin: Wizard Form-->
<EditForm Model="#_model" OnValidSubmit="HandleValidSubmit" >
<DataAnnotationsValidator />
<h4 class="mb-10 font-weight-bold text-dark">Enter your Payment Details</h4>
<div class="row">
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label>Name on Card</label>
<InputText #bind-Value="_model.BillingName" name="ccname" class="form-control form-control-solid form-control-lg"
placeholder="Jane Doe" />
<ValidationMessage For="#(() => _model.BillingName)" />
</div>
<!--end::Input-->
</div>
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label>Notification Email</label>
<InputText #bind-Value="_model.BillingEmail" name="ccemail" class="form-control form-control-solid form-control-lg"
placeholder="jane.doe#domain.com" />
<ValidationMessage For="#(() => _model.BillingEmail)" />
</div>
<!--end::Input-->
</div>
</div>
<div class="row">
<div class="col-xl-12">
<!--begin::Input-->
<div class="form-group">
<label>Card Information</label>
<StripeCard PublishableKey="#_stripePublishableKey" CardProcessedCallBack="ProcessSubscriptionAsync"></StripeCard>
<span class="form-text text-muted">Powered by <strong>Stripe</strong>.</span>
</div>
<!--end::Input-->
</div>
</div>
<ValidationSummary />
<div class="d-flex justify-content-between border-top mt-5 pt-10">
<div>
<button type="button" class="btn btn-success font-weight-bolder text-uppercase px-9 py-4"
#onclick="HandleValidSubmit">
Submit
</button>
</div>
</div>
</EditForm>
<!--end: Wizard Form-->
</div>
</div>
</div>
</div>
#code{
private Model _model;
private string _stripePublishableKey;
protected override void OnInitialized()
{
_model = new Model();
_stripePublishableKey = "Here we put Development or Production publishableKey"; //Add publishable key here
base.OnInitialized();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("KTSubscriptionCheckout.init");
}
await base.OnAfterRenderAsync(firstRender);
}
private async Task HandleValidSubmit()
{
await JS.InvokeVoidAsync("StripeInterop.createPaymentMethod", _model.BillingEmail, _model.BillingName);
}
//Callback method will return stripe paymentId
private async Task ProcessSubscriptionAsync(string paymentId)
{
//We process paymentId here and continue with our backend process
await Task.CompletedTask;
}
public class Model
{
[Required]
public string BillingName { get; set; }
[Required]
public string BillingEmail { get; set; }
}
}
Youtube video if you want to have a look. https://youtu.be/ANYvFHHfyy8
Good luck...
I am making isomorphic map maker (or am trying to so far) and am moving camera using the arrow keys. The problem I have is that when I go beyond the canvas range the map is cut.
It seems as it erases the parts that are not in canvas's range? I don't understand...
When I zoom out the objects are there, but when I reset the zoom the objects are not visible again.
Here is the code fragment I am using (I removed the debug mode and it is not even showing the polygons ;( ):
game.ts:
import 'phaser';
export default class Demo extends Phaser.Scene {
private cameraMoveSpeed: number = 6;
private tileSize: number = 64; // pixels
private cursors: Phaser.Types.Input.Keyboard.CursorKeys;
constructor() {
super('demo');
}
preload() {
this.load.image('grass', 'assets/grass.png');
}
create() {
// This will create a new object called "cursors", inside it will contain 4 objects: up, down, left and right.
// These are all Phaser.Key objects, so anything you can do with a Key object you can do with these.
this.cursors = this.input.keyboard.createCursorKeys();
this.cameras.main
.setBounds(-2048, -2048, 2048 * 2, 2048 * 2, true) // TODO what should this be?
.centerOn(0, 0)
.setZoom(1);
for (let i = 0; i < 20; i++) {
for (let j = 0; j < 20; j++) {
const x = j * this.tileSize;
const y = i * this.tileSize;
placetile.call(this, x, y); // Place tiles in isometric coordinates
}
}
// Zoom keys
this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A)
.on('down', function (key, event) {
console.log('Plus Clicked');
if (this.cameras.main.zoom < 2) {
this.cameras.main.zoom += 0.25;
}
}, this);
let minusKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S)
.on('down', function (key, event) {
console.log('Minus Clicked');
if (this.cameras.main.zoom > 0.25) {
this.cameras.main.zoom -= 0.25;
}
}, this);
this.input.on('wheel', function (pointer, gameObjects, deltaX, deltaY, deltaZ) {
if (deltaY < 0) {
console.log('Scrolled up (rotate left)');
} else {
console.log('Scrolled down (rotate right)');
}
});
}
update() {
// For example this checks if the up or down keys are pressed and moves the camera accordingly.
if (this.cursors.up.isDown) {
this.cameras.main.y += this.cameraMoveSpeed;
}
else if (this.cursors.down.isDown) {
this.cameras.main.y -= this.cameraMoveSpeed;
}
if (this.cursors.left.isDown) {
this.cameras.main.x += this.cameraMoveSpeed;
}
else if (this.cursors.right.isDown) {
this.cameras.main.x -= this.cameraMoveSpeed;
}
}
}
function placetile(x, y) {
const isoPoint = cartesianToIsometric(new Phaser.Geom.Point(x, y));
console.log(isoPoint, this.tileSize);
const tile = this.add.polygon(isoPoint.x, isoPoint.y, [
this.tileSize, 0,
0, this.tileSize / 2,
0 + this.tileSize, this.tileSize,
0 + this.tileSize * 2, this.tileSize / 2
], 0xeeeeee)
// const tile = this.add.sprite(isoPoint.x, isoPoint.y, 'grass')
.setOrigin(0.5, 0.5)
// .setDepth(y)
.setInteractive(new Phaser.Geom.Polygon([
this.tileSize, 0,
0, this.tileSize / 2,
0 + this.tileSize, this.tileSize,
0 + this.tileSize * 2, this.tileSize / 2,
]), Phaser.Geom.Polygon.Contains)
.on('pointerover', function (event) {
this.setStrokeStyle(4, 0x7878ff, 0.5);
})
.on('pointerout', function (event) {
this.setStrokeStyle(0);
});
console.log(tile);
// this.input.enableDebug(tile, 0xff00ff);
}
const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
backgroundColor: '#eeeeee',
scale: {
width: 1280,
height: 1024,
parent: 'content'
// mode: Phaser.Scale.RESIZE ????
},
scene: Demo,
// physics: {
// default: 'arcade',
// arcade: {
// debug: true
// }
// },
};
const game = new Phaser.Game(config);
function cartesianToIsometric(cartPt) {
return new Phaser.Geom.Point(
cartPt.x - cartPt.y,
(cartPt.x + cartPt.y) / 2
);
}
function isometricToCartesian(isoPt) {
var tempPt = new Phaser.Geom.Point();
tempPt.x = (2 * isoPt.y + isoPt.x) / 2;
tempPt.y = (2 * isoPt.y - isoPt.x) / 2;
return (tempPt);
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phaser Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
body {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div id="content"></div>
</div>
<script src="game.js"></script>
</body>
You're using this.camera.main.x and this.camera.main.y. Those properties seem as though they don't update rendering for previously offscreen textures. I linked a copy of your code that works when using this.camera.main.scrollX and this.camera.main.scrollY. Those are the correct properties to use for scrolling the camera.
Here's a link to the docs that explicitly states scrollX/scrollY as the properties to use for scrolling:
https://photonstorm.github.io/phaser3-docs/Phaser.Cameras.Scene2D.Camera.html#scrollX__anchor
Copied your code here with those changes to show working:
https://stackblitz.com/edit/phaser-camera-main-scrollx-not-x
I'm facing a problem there is a styled component named Breadcrumb but that component depends upon 1 separate styled-components i.e BreadcrumbItem. Both components have different props.
BreadcrumbItem.js:
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const propTypes = {
/** Active the current BreadcrumbItem. */
active: PropTypes.bool,
/** Additional classes. */
className: PropTypes.string
};
const AbstractBreadcrumbItem = (props) => {
const { className, active, ...attributes } = props;
return <li {...attributes} className={className} />;
};
AbstractBreadcrumbItem.propTypes = propTypes;
const BreadcrumbItem = styled(AbstractBreadcrumbItem)``;
BreadcrumbItem.propTypes = propTypes;
export default BreadcrumbItem;
Breadcrumb.js:
import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
const propTypes = {
/** Additional classes. */
className: PropTypes.string,
/** Primary content. */
children: PropTypes.node,
/** Custom separator */
separator: PropTypes.string,
/** Change the look and feel of the BreadcrumbItem. */
scheme: PropTypes.oneOf(["red", "purple"]).isRequired
};
const defaultProps = {
scheme: "red",
separator: "/"
};
const AbstractBreadcrumb = props => {
const { className, children, separator, scheme, ...attributes } = props;
return (
<ul {...attributes} className={className}>
{children}
</ul>
);
};
AbstractBreadcrumb.propTypes = propTypes;
AbstractBreadcrumb.defaultProps = defaultProps;
const Breadcrumb = styled(AbstractBreadcrumb)`
display: flex;
flex-wrap: wrap;
padding: 18px 26px;
margin-bottom: 1rem;
list-style: none;
background-color: #fbfbfb;
border-radius: 4px;
li + li:before {
content: "${props => props.separator}";
}
li + li {
padding-left: 8px;
}
li + li::before {
display: inline-block;
padding-right: 0.5rem;
}
li a {
font-size: 14px;
transition: color .4s linear;
color: ${props => (props.scheme === "red" ? "red" : "purple")};
&:hover {
color: black;
}
}
`;
Breadcrumb.propTypes = propTypes;
Breadcrumb.defaultProps = defaultProps;
export default Breadcrumb;
This is the main markup to create the Breadcrumb.
App.js:
import React from 'react';
import Breadcrumb from './Breadcrumb';
import BreadcrumbItem from './BreadcrumbItem';
export default function App() {
return (
<div className="App">
<Breadcrumb scheme="red">
<BreadcrumbItem>
Home
</BreadcrumbItem>
<BreadcrumbItem>
Shop
</BreadcrumbItem>
<BreadcrumbItem active>
Product
</BreadcrumbItem>
</Breadcrumb>
</div>
);
}
What problem I'm facing is I want to use the active prop of the BreadcrumbItem component inside the parent Breadcrumb component to change the look and feel of the item according to the scheme.
I found the first way which is to add the BreadcrumbItem styles inside the component itself and use something like this ${props => props.active ? css`` : css``}. But Is there a way in styled-component to access the child component prop inside the Parent component?
Please answer the question in the context of styled-components.
Live link: Codesandbox
I'd suggest to move the styling of list item, i.e. <li>, to its own component, i.e. BreadcrumbItem. In this scenario you won't need to access the state of child component instead you'll be handling active state in <li> styles. And it'll look more cleaner and separation of concern (which React recommends) will be there.
[EDIT]: Sample code to access props of children
const List = ({ children }) => {
return (
<ul>
{React.Children.map(children, x => {
console.log(x.props); // get props of children
return x;
})}
</ul>
);
};
const Item = ({ children }) => <li>{children}</li>;
export default function App() {
return (
<List>
<Item>Hello</Item>
<Item active>HI</Item>
</List>
);
}
Which library in React to create animation of moving a single char from a string to a new position automatically?
This is an implementation without any library:
class AnimateChar extends React.Component {
animateChar = () => {
const { children, charIndex } = this.props;
return (
children.split('').map((char, i) => (
<span className={i === charIndex ? 'animate' : ''}>
{char}
</span>
))
)
}
render() {
return this.animateChar();
}
}
ReactDOM.render(<AnimateChar charIndex={2}>moveme</AnimateChar>, document.getElementById('root'))
#keyframes move {
0% {transform: translateY(0)}
100% {transform: translateY(12px)}
}
.animate {
display: inline-block;
animation: move .5s ease-in-out forwards
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I'm having a problem with my hybrid iOS application, in iOS 11 beta. It is basically a web app running within a WKWebView. The problem does not exist in iOS 10, but has been introduced with iOS 11. As of beta 8, the problem is still reproducible.
When the webapp calls the JavaScript function scrollIntoView a couple of times, parts of the GUI becomes unresponsive.
The following reduced HTML file demonstrates the problem:
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta id="viewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Testcase</title>
<script>
let numClicks = 0;
function runScrollIntoView() {
document.querySelector(".element-1").scrollIntoView();
}
function debugInfo() {
return {
"window.screen.height": window.screen.height,
"window.screen.availHeight": window.screen.availHeight,
"document.body.scrollTop": document.body.scrollTop,
"document.body.scrollHeight": document.body.scrollHeight
};
}
function clickHandler() {
numClicks++;
document.querySelector('.counter').innerText += numClicks + " clicks, " + JSON.stringify(debugInfo()) + "\n";
}
</script>
<style>
.instructions div {
border: 1px solid blue;
color: blue;
}
.counter {
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="instructions">
<div onclick="clickHandler()">1. Click me to run click handler</div>
<div onclick="runScrollIntoView()">2. Click me to run Element.scrollIntoView</div>
<div onclick="clickHandler()">3. Click me to run click handler again</div>
<div onclick="runScrollIntoView()">4. Click me to run Element.scrollIntoView again</div>
<div onclick="clickHandler()">5. Click me to try run click handler again - nothing happens</div>
<div>(Repeat 4-5 if necessary)</div>
</div>
<div class="counter">
Number of clicks
</div>
<div class="element-1">Target to scrollIntoView</div>
</body>
</html>
... when being loaded with this viewcontroller:
import UIKit
import WebKit
import Foundation
import SystemConfiguration
class ViewControllerNgf: UIViewController, WKNavigationDelegate, WKUIDelegate {
var webView: WKWebView!
override func loadView() {
self.webView = WKWebView(frame: CGRect.zero)
webView.navigationDelegate = self
webView.uiDelegate = self
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
self.loadWebApp()
}
fileprivate func loadWebApp() {
let htmlFile = Bundle.main.path(forResource: "htmlfile", ofType: "html")
let html = try? String(contentsOfFile: htmlFile!, encoding: String.Encoding.utf8)
DispatchQueue.main.async {
self.webView!.loadHTMLString(html!, baseURL: nil)
}
}
}
I have reported this as a bug to Apple, but no response yet, leading me to think I'm doing something wrong in the app. But the Swift code is basically copied from Apple's documentation.
So what could be the problem?
The problem seems to have been resolved in iOS 11.2.