43081j / 43081j/relit

Initial state of PermissionsController for geolocation doesn't seem to reflect its real state on pageload

未關閉
#32 2 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
TypeScript
星號
109
分支
3
平均合併
5 小時 52 分鐘
30 天內合併 PR
2

描述

Hi there!

I was just about to use the PermissionController to be able to work with the geolocations or to display the UI in a slightly different way depending on the state. I'm not sure if I'm doing something wrong or not, but the initial state doesn't seem to correspond to the actual state. I followed the demo in the docs and added some UI with help from lit/task, both in Chrome and Firefox the initial state after I open the page is “prompt” no matter if the permission was granted or denied.

I've got a [reproduction repository](https://github.com/TonySpegel/gps-permission-demo) (you can just run `npm run dev`) and also a [github page with a demo](https://tonyspegel.github.io/gps-permission-demo/)

https://github.com/user-attachments/assets/f559ce12-d6f9-46c9-a145-648e6e33d0c8

and also my code inline here:
```typescript
import { html, LitElement, TemplateResult } from 'lit';
import { customElement, state } from 'lit/decorators.js';

import { PermissionsController } from 'relit';
import { Task } from '@lit/task';
import { choose } from 'lit/directives/choose.js';

type coords = Pick;

@customElement('app-permission')
export class AppHome extends LitElement {
@state()
latitude: number | undefined = 52.522138048058856;

@state()
longitude: number | undefined = 13.394977670545542;

private _geoPermissionController = new PermissionsController(
this,
'geolocation'
);

private _getGpsPosition(
options: PositionOptions = { enableHighAccuracy: true }
): Promise {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
resolve({ latitude, longitude });
},
(error) => reject(error),
options
);
});
}

private _gpsPositionTask = new Task(this, {
task: () => this._getGpsPosition(),
onComplete: (coords) => {
this.latitude = coords.latitude;
this.longitude = coords.longitude;
},
autoRun: false,
args: () => [this.latitude, this.longitude] as const,
});

private _permissionPending = () => {
return html`
{
this._gpsPositionTask.run();
}}
>
Ask for location permission

`;
};

private _permissionDenied = () => html`
we got a problem
`;

private _permissionGranted = () => html`
this._gpsPositionTask.run()} variant="primary">
Get GPS Position

`;

private _gpsButtonTemplate = (state: PermissionState) => html`
${choose(state, [
['prompt', () => this._permissionPending()],
['granted', () => this._permissionGranted()],
['denied', () => this._permissionDenied()],
])}
`;

render() {
return html`

Permission works


${this._geoPermissionController.state}

${'geolocation' in navigator
? this._gpsButtonTemplate(this._geoPermissionController.state)
: null}
`;
}
}
```
btw it doesn't seem to matter where or when the state is obtained.

I'm sorry if I misunderstood or misused something, thanks for the help :) and let me know if I can provide more details!

Edit: added a demo

貢獻指南

這個儲存庫沒有索引到貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。